Fade bottom of UIWebView using CSS

2019-09-16 16:59发布

问题:

I'm trying fade out the bottom of the UIWebView in my detailView. It's more like fading last 20-40 px. I'm using CSSTricks code for "ReadMoreFade" (link). My simplified version is pasted below.

My problem is when I start scrolling in my UIWebView, faded area stays there like a block. I'm attaching a screenshot that shows this. Any suggestions or hints? Thank you.

SCREENSHOT: 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>

回答1:

For this situation, I'd just make a white image with a transparent gradient and overlay it on top of that UIWebView as needed. It's going to be a lot quicker than trying to debug browser stuff...

回答2:

Whether you use an image or a CSS3 gradient, I'm afraid position:fixed doesn't work on iOS.