iOS不使用-webkit-overflow-scrolling来尊重z-index

Question

iOS不使用-webkit-overflow-scrolling来尊重z-index

Aid*_*des 22 html css scroll z-index ios

问题:

在iOS上z-index,使用时会忽略可滚动区域-webkit-overflow-scrolling.如果两个-webkit-overflow-scrolling重叠的对象滚动,则滚动而不是上面显示的对象.

如何重现:

创建两个彼此重叠的元素(position: absolute例如),其中一个元素具有更高的元素z-index并添加

.selector
{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

Run Code Online (Sandbox Code Playgroud)

对他们两个.两个元素都应该具有足够的内容以便可滚动.

另外添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Run Code Online (Sandbox Code Playgroud)

到你的<head>.然后将页面添加到主屏幕并从那里启动它.

如果您然后尝试滚动上部元素,则会滚动下面的元素.

MCVE:

或者只是看看这支笔.从iOS设备启动完整版,将其添加到主屏幕并从那里启动.

环境:

使用iOS 9.1和iOS 9.3.2在iPhone 5和iPhone 6上进行测试

观察:

只有从主屏幕(固定应用程序)或Xamarin Webview内部启动页面/应用程序时才会出现此问题(可能与UIWebView和WKWebView有关)
在页面加载后更改设备方向(纵向/横向)后问题是固定的,直到重新加载页面(可能重新触发布局固定它？)
将较低元素更改overflow-y为hidden通过JS确实可以解决问题,但是切换overflow会导致重新绘制导致性能问题
删除height: 100%; width: 100%从html, body解决问题为好,但这些都必须设置百分比值正常工作

需要一个适当的解决方案/解决方法来解决这个问题,而不会造成任何麻烦的副作用.还要理解为什么会发生这种情况.

Answer 1

Isa*_*dni 8

从本质上讲,您遇到的是iOS漏洞-webkit-overflow-scrolling: touch;.为了解决这个问题,根据这个答案,只需将以下CSS样式添加到可滚动条div:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

Run Code Online (Sandbox Code Playgroud)

总而言之,如果您将上述样式添加到scrollableCSS中的类的样式中,它应该可以工作.在运行iOS 9的iPhone 5s上测试过.请注意,如果向下滚动到可滚动部分的顶部或顶部,它将开始滚动正文.

我相信这些额外风格的功能是诱骗iPhone使用GPU,但请记住,由于Safari的一个错误,它们只是必需的 - 这不是你的错,这些额外的风格不应该真的需要包括在内.但是将它们放入你的CSS中它应该像梦一样工作!

归档时间：	9 年，6 月前
查看次数：	11391 次
最近记录：	6 年，4 月前