使用 CSS 淡化 UIWebView 的底部答案

【问题标题】：Fade bottom of UIWebView using CSS使用 CSS 淡化 UIWebView 的底部
【发布时间】：2011-06-15 07:55:03
【问题描述】：

我正在尝试在我的 detailView 中淡出 UIWebView 的底部。这更像是最后 20-40 像素的褪色。我正在为“ReadMoreFade”（link）使用 CSSTricks 代码。我的简化版贴在下面。

我的问题是当我开始在 UIWebView 中滚动时，褪色区域像块一样停留在那里。我附上了显示这一点的屏幕截图。有什么建议或提示吗？谢谢。

屏幕截图： http://i51.tinypic.com/2rmxsfp.png

<!DOCTYPE html>
<html>
<head>
 <title>Fade bottom</title>
 <style>
  body{background:#FFF}
  p {
   color:#000;
   margin:0 auto;
   text-align:justify;
   text-indent:30px;
   width:600px;
  }

  #fadeBottom {
   background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,0.7)));
   bottom:0;
   height:50px;
   left:0;
   position:fixed;
   width:100%;
  }
 </style>
</head>
<body>
 <p>Some long text here. Lorem ipsum?</p>
 <div id="fadeBottom"></div>
</body>
</html>

【问题讨论】：

标签： iphone css uiwebview webkit fade

【解决方案1】：

对于这种情况，我只需制作具有透明渐变的白色图像，并根据需要将其覆盖在 UIWebView 之上。这比尝试调试浏览器的东西要快得多......

【讨论】：

我想到了这一点，但想知道我是否可以使用渐变的 CSS3 来做到这一点。它在 Safari 上运行良好，但在 iPhone 上却不行。
是的，谁知道呢。我不是很擅长 web 开发，但如果苹果在 iPhone 上关闭了这种重复渲染，我不会感到惊讶。当你捏放大时，它也可能会导致问题，虽然我从未尝试过。

【解决方案2】：

不管你用的是图片还是 CSS3 渐变，恐怕position:fixed doesn't work on iOS。

【讨论】：

你是对的。 “CSS 固定定位在 iPhone 和 iPad 上的 Safari 中有效，但并不像你想象的那样。”我现在正在研究这段代码，似乎在 Mobile Safari 中运行良好：doctyper.com/stuff/iphone/fixed。谢谢。