3

remote debug screencast

I have a local page in android webview, pages's html and body both has width:100%;height:100%;overflow:hidden; , and the #result-popup-wrap has the following css:

#result-popup-wrap {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 245px;
background: #fbfbfb;
border-top: 1px solid #dcd9d5;
-webkit-transform: translateY(100%);
}

but, as you see, when I scroll to bottom of the page, I can see the #result-popup-wrap, which should not be visible.

Any help is appreciated!

Jess
  • 620
  • 1
  • 7
  • 18

2 Answers2

3

Just for anyone who are suffering the same problem.

ADD position:relative to the <body> tag.

Apparently, this is a bug of WebView, on both Android and iOS. On chrome of PC version, page renders OK without body{position:relative;}, but in WebView, you can scroll the entire page, including the 'hidden' #result-popup-wrap.

click here to see demo , pay attention to the UPPER comment in css

Jess
  • 620
  • 1
  • 7
  • 18
2

you can set body{position:fixed;top:0} to the body.

dingquantracy
  • 21
  • 3