iOS不使用-webkit-overflow-scrolling尊重z-index [英] iOS not respecting z-index with -webkit-overflow-scrolling
问题描述
在iOS上，使用-webkit-overflow-scrolling时将忽略可滚动区域的z-index.如果两个具有-webkit-overflow-scrolling的对象重叠，则滚动下一个对象，而不滚动显示在上方的对象.
On iOS the z-index of a scrollable area is ignored when using -webkit-overflow-scrolling. If two objects with -webkit-overflow-scrolling overlap the lower one is scrolled instead of the one being displayed above.
创建两个相互重叠的元素(例如，使用position: absolute)，其中之一具有较高的z-index并添加
Create two elements overlaying each other (with position: absolute for example), one of them having a higher z-index and add
.selector
{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
对他们两个.这两个元素都应具有足够的内容以便可滚动.
to both of them. Both elements should have enough content to be scrollable.
另外添加
<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>.然后将页面添加到主屏幕，然后从那里启动它.
to your <head>. Then add the page to your home screen and launch it from there.
如果您随后尝试滚动上方的元素，则会滚动下方的元素.
If you then try to scroll the upper element the element beneath is scrolled instead.
或者只需签出 这支笔 .从iOS设备启动 完整 版本，并将其添加到您的家庭中屏幕并从那里启动.
Alternatively just check out this pen. Launch the full version from your iOS device, add it to your home screen and launch from there.
在 iPhone 5 和 iPhone 6 上使用 iOS 9.1 和 iOS 9.3.2
- 仅当从主屏幕(固定的应用程序)或Xamarin Webview(可能与UIWebView和WKWebView有关)启动页面/应用程序时，才会发生此问题.
- 在页面加载后更改设备方向(纵向/横向)后，问题得以解决，直到重新加载页面为止(也许重新触发布局可以解决此问题?)
- 通过JS将下部元素
overflow-y更改为hidden确实可以解决问题，但是切换overflow会导致重新绘制，从而导致性能问题 - 将
height: 100%; width: 100%从html, body删除也可以解决此问题，但是必须设置百分比值才能正常工作
- The issue only occurs when launching the page/app from homescreen (pinned app) or inside a Xamarin Webview (might have something to do with UIWebView and WKWebView)
- After changing the device orientation (portrait/landscape) after page load the problem is fixed until the page is reloaded (maybe re-triggering layout fixed it?)
- Changing the lower elements
overflow-ytohiddenvia JS does fix the problem, however togglingoverflowcauses a repaint causing performance issues - Removing
height: 100%; width: 100%fromhtml, bodyfixes the problem as well, however those have to be set for percentage values to work properly
需要一个适当的解决方案/解决方法，以解决此问题而不会引起任何麻烦的副作用.并解释为什么会发生这种情况.
Needed is a proper solution / workaround to fix this issue without causing any troublesome side-effects. Also explanation of why this happens would be appreciated.
推荐答案
本质上，您遇到的是带有-webkit-overflow-scrolling: touch;的iOS错误.为了解决此错误，按照此答案，只需将以下CSS样式添加到可滚动的div中:
Essentially, what you're experiencing is an iOS bug with -webkit-overflow-scrolling: touch;. In order to solve this bug, as per this answer, just add the following CSS styles to the scrollable div:
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
因此，总而言之，如果将上述样式添加到CSS中scrollable类的样式，则它应该可以工作.在运行iOS 9的iPhone 5s上进行了测试.请注意，如果您向下滚动到位于所有其他内容之上的可滚动部分的底部或顶部，它将开始滚动主体.
So all in all, if you add the above styles to the styles for the scrollable class in your CSS, it should work. Tested on an iPhone 5s running iOS 9. Note that if you scroll down to the bottom or top of the scrollable section that is above everything else, it will start to scroll the body.
我相信这些多余的样式会诱骗iPhone使用GPU，但是请记住，仅由于Safari的错误才有必要使用它们-这不是您的错，这些多余的样式实际上并不需要包括.但是将它们弹出到CSS中，它应该像梦一样工作！
I believe that what those extra styles do is trick the iPhone into using the GPU, but remember that they're only necessary due to a bug with Safari - it's not your fault and these extra styles shouldn't really need to be included. But pop them into your CSS and it should work like a dream!
这篇关于iOS不使用-webkit-overflow-scrolling尊重z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
