无法禁用android webview溢出 [英] android webview overflow cannot be disabled
问题描述
我在android webview中有一个本地页面，页面的html和body都具有width:100%;height:100%;overflow:hidden;，而#result-popup-wrap具有以下CSS:
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%);
}
但是，正如您所看到的，当我滚动到页面底部时，可以看到#result-popup-wrap，它应该是不可见的.
but, as you see, when I scroll to bottom of the page, I can see the #result-popup-wrap, which should not be visible.
感谢您的帮助！
推荐答案
仅适用于遇到相同问题的任何人.
Just for anyone who are suffering the same problem.
将position:relative添加到<body>标签.
显然，这是Android和iOS上WebView的错误.在PC版本的chrome上，页面在没有body{position:relative;}的情况下呈现为OK，但是在WebView中，您可以滚动整个页面，包括隐藏的" #result-popup-wrap.
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.
单击此处查看演示，请注意CSS中的UPPER注释
这篇关于无法禁用android webview溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
