“-webkit-overflow-scrolling: touch”破坏了 css 3d 透视

正在寻找解决方案仅限 iOS Safari

使用时-webkit-overflow-scrolling: touch它打破了 iOS 上的 3D 视角。

请参阅演示CodePen http://codepen.io/abernier/pen/qdaxro.

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);}

有解决方法吗？

5 月 29 日更新

哎哟！我真傻。下面的内容虽然是正确的……但并没有很好地解决这个问题。

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

{perspective:300px;}

因此，您似乎想要.persdiv 切换为.scroll或者在之后添加另一个.scroll具有相同的视角。

另外，尝试移动perspective: 300px; to .scroll。当向上或向下滚动时，角度似乎会发生变化。

原答案

答案是否定的。无法将 3D 变换包含在具有此处尝试的剪切的容器内。

问题是overflow-y:scroll根据以下方式打破转换样式属性spec http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#transform-style。溢出-y 影响嵌套元素。如果您的问题仍然存在，您可能还需要使用-WebKit-transform-style: preserve-3d声明于.scroll，尽管我认为 iOS 已经在这种情况下建立了堆栈上下文（Firefox 需要这个，Webkit 似乎不需要）。

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

如果是这种情况，您将需要使用变换和一些聪明的黑客技术来伪造它，并且应该使用不透明度作为此努力的一部分，请注意，这也（如上面的规范中，位于变换样式的正下方）在以下情况下会导致扁平化效果：不应用于最终节点。假设您的不透明度不是 1.el，你在这里很好，因为.el是最终节点，但如果应用了不透明度.scroll，同样的展平.el与溢出一样发生。

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

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