如何使 translate3d 元素尊重 Mobile Safari 中的 z-index？
我在 Mobile Safari 中发现了一个有线问题作为演示 http://moheng.github.com/demo/translate3d .html
translate.html 内有一个页面 translate3d_iframe.html 作为 iframe。 translate3d_iframe.html 中的元素具有样式 -webkit-transform:translate3d(0, 0, 0) 来强制 3d 加速。
有趣的结果是，如果 3D 元素的 z 索引较低，它总是显示在其他元素之上。
更有趣的是：3D 元素仅显示在其他元素之上。您仍然可以点击“被 3D 元素隐藏”的菜单项（点击时会显示警报消息）。
这只能在 Mobile Safari 中重现。
有没有办法解决它？我只是觉得 Web 开发人员必须了解 iOS 浏览器如何工作才能解决此类问题。
I found a wired issue in Mobile Safari as demo http://mocheng.github.com/demo/translate3d.html
There is one page translate3d_iframe.html inside translate.html as iframe. Elements in translate3d_iframe.html has style -webkit-transform: translate3d(0, 0, 0) to force 3d acceleration.
The interesting result is that the 3D-ed element would always displayed on top of other elements event it has lower z-index.
What is more interesting: the 3D-ed element is just displayed to be on top of other elements. You can still tap on the menu item "hidden by" 3D-ed element (alert message is shown on tap).
This can only be reproduced in Mobile Safari.
Is there anyway to workaround it? I just felt that web developers have to know how iOS browser works to attack such type of issues.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论