我在 Mobile Safari 中发现了一个有线问题作为演示http://mocheng.github.com/demo/translate3d.html
translate.html内有一页translate3d_iframe.html作为 iframe。translate3d_iframe.html中的元素具有样式-webkit-transform: translate3d(0, 0, 0)以强制 3d 加速。
有趣的结果是 3D 元素将始终显示在其他元素的顶部,因为它具有较低的 z-index。
更有趣的是:3D 元素只是显示在其他元素之上。您仍然可以点击菜单项“被 3D 元素隐藏”(点击时会显示警报消息)。
这只能在 Mobile Safari 中重现。
有没有办法解决它?我只是觉得 Web 开发人员必须知道 iOS 浏览器是如何解决此类问题的。