html - "-webkit-overflow-scrolling: touch"破坏了 css 3d 透视图

Question

Searching for a solution for iOS safari ONLY

当使用 -webkit-overflow-scrolling: touch 时，它会破坏 iOS 上的 3d 透视。

请参阅 CodePen 上的演示.

HTML

<div class="pers">
  <div class="scroll">
    <div class="el">
    </div>
  </div>
</div>

CSS

.pers {perspective:300px;}
.scroll {overflow-y:scroll;-webkit-overflow-scrolling:touch; height:100vh;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

有解决办法吗？

Answer 1

更新，5 月 29 日

呸!我好傻下面的内容虽然是正确的......但并没有很好地解决这个问题。

如果您希望旋转的配置保持与您所说明的相同，请在 .scroll 和 .el 之间添加一个 div，并将其样式设置为:

{perspective:300px;}

因此，您似乎希望将 .pers div 切换为 .scroll 或在 .scroll 之后添加另一个具有相同视角的 div .

此外，尝试将 perspective: 300px; 移动到 .scroll。向上或向下滚动一次时， Angular 似乎会发生变化。

---

原始答案

答案并非如此。不能在容器内包含 3D 变换，这里正在尝试进行剪裁。

问题是 overflow-y:scroll 根据 spec 破坏了 transform-style 属性. overflow-y 影响嵌套元素。如果您的问题仍然存在，您可能还必须在 .scroll 上使用 -WebKit-transform-style:preserve-3d 声明，尽管我认为 iOS 已经有一个堆栈上下文在这种情况下建立(Firefox 需要这个，Webkit 似乎不需要)。

一种解决方案是从 body 中删除 overflow:hidden 并从 .scroll 中删除 overflow-y:scroll >，但我怀疑您希望将其作为页面/屏幕的较小部分并在其中移动图像 block 。

如果是这种情况，您将需要通过转换和一些聪明的技巧来伪造它，并且应该使用不透明度作为这项工作的一部分，请注意，这也是(如上面的规范，在转换样式的正下方)导致未应用于最终节点时的扁平化效果。假设您在 .el 上的不透明度不是 1，您在这里没问题，因为 .el 是最终节点，但如果不透明度应用于 .scroll，发生与溢出相同的 .el 扁平化。

由于我无法访问该设备，因此尚未在 iOS 上进行测试。

注意:在大多数支持 3D 变换的桌面浏览器上，为 body 设置可见以外的溢出值不会导致此问题。我不知道 iOS/移动设备。