gpt4 book ai didi

html - iOS 不尊重 z-index 与 -webkit-overflow-scrolling

转载 作者:IT王子 更新时间:2023-10-29 08:06:40 25 4
gpt4 key购买 nike

问题:

在 iOS 上 z-index使用 -webkit-overflow-scrolling 时忽略可滚动区域的.如果两个对象带有 -webkit-overflow-scrolling overlap 下面的那个被滚动,而不是上面显示的那个。

如何复现:

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

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

他们两个。两个元素都应该有足够的内容可以滚动。

另外添加

<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">

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

如果您随后尝试滚动上方的元素,则会滚动下面的元素。

MCVE:

或者查看 this pen 。启动 full iOS 设备上的版本,将其添加到主屏幕并从那里启动。

环境:

在装有 iOS 9.1iOS 9.3.2iPhone 5iPhone 6 上测试

观察:

  • 仅当从主屏幕(固定应用)或 Xamarin Webview(可能与 UIWebView 和 WKWebView 有关)启动页面/应用时才会出现此问题
  • 在页面加载后更改设备方向(纵向/横向)后,问题得到解决,直到页面重新加载(也许重新触发布局解决了它?)
  • 更改下部元素 overflow-yhidden通过 JS 确实解决了这个问题,但是切换 overflow导致重绘导致性能问题
  • 删除 height: 100%; width: 100%来自 html, body也解决了这个问题,但是必须设置这些百分比值才能正常工作

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

最佳答案

本质上,您遇到的是 -webkit-overflow-scrolling: touch; 的 iOS 错误。为了解决这个错误,根据 this answer ,只需将以下 CSS 样式添加到可滚动的 div:

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

总而言之,如果您将上述样式添加到 CSS 中 scrollable 类的样式中,它应该可以工作。在运行 iOS 9 的 iPhone 5s 上测试。请注意,如果您向下滚动到高于其他所有内容的可滚动部分的底部或顶部,它将开始滚动正文。

我相信这些额外的样式会诱使 iPhone 使用 GPU,但请记住,它们只是由于 Safari 的错误才需要的 - 这不是你的错,这些额外的样式实际上并不需要包括。但是将它们放入您的 CSS 中,它应该像梦一样工作!

关于html - iOS 不尊重 z-index 与 -webkit-overflow-scrolling,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37696746/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com