"-webkit-overflow-scrolling:touch"打破css 3d透视

Question

仅搜索iOS Safari的解决方案

使用-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日更新

卫生署!我这么傻.以下,虽然真实... ish并没有很好地解决这个问题.

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

{perspective:300px;}

因此,似乎您希望.persdiv切换为.scroll或.scroll使用相同的透视后添加另一个.

另外,尝试移动perspective: 300px;到.scroll.角度似乎随着向上或向下滚动而改变.

原始答案

答案不是真的.在此处尝试剪切的容器内部不能包含3D变换.

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

一种解决方案是删除你overflow:hidden的body和overflow-y:scroll从.scroll,但我怀疑你将要把它作为页面/屏幕的一个较小的部分,并在其中移动图像块.

如果是这种情况,你需要使用变换和一些聪明的hackery来假装,并且应该使用不透明度作为这项努力的一部分,请注意,这也是(如上面的规范,在变换样式下面)导致展平效果时未应用于最终节点.假设你有不同于1的不透明度.el,你在这里和.el最终节点一样好,但是如果应用了不透明度.scroll,.el则会出现与溢出相同的扁平化.

尚未在iOS上进行测试,因为我无法访问该设备.

注意:在大多数支持3D变换的桌面浏览器上,设置身体可见的溢出值不会导致此问题.我不知道iOS /手机.