“-webkit-overflow-scrolling：touch”打破了css的3D视angular
仅searchiOS Safari的解决scheme
当使用-webkit-overflow-scrolling: touch它打破了iOS的3D视angular。
查看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);}
有没有解决方法？
更新，5月29日
卫生署！ 我很愚蠢。 下面，虽然真的… ish不能很好地解决这个问题。
如果你想旋转的configuration保持不变，你可以在.scroll和.el之间添加一个div，并设置它的样式：
{perspective:300px;}
因此，你似乎希望.pers div与.scroll切换或添加另一个后.scroll相同的angular度。
另外，请尝试移动perspective: 300px; 到.scroll 。 angular度似乎随着向上或向下滚动而改变。
原始答复
答案并不是真的。 在这里正在尝试使用裁剪的容器内不能包含3D变换。
问题是overflow-y:scroll按照规范打破了transform-style属性。 overflow-y影响嵌套元素。 如果你的问题依然存在，你可能还需要在-WebKit-transform-style: preserve-3d上使用-WebKit-transform-style: preserve-3d声明，尽pipe我认为iOS在这种情况下已经build立了一个堆栈上下文（Firefox需要这个，Webkit似乎没有） 。
一个解决scheme是删除你的overflow:hidden从body overflow:hidden和overflow-y:scroll从。 overflow-y:scroll ，但我怀疑你想要作为页面/屏幕的一小部分，并在其中移动图像块。
如果是这样的话，你需要用变换和一些聪明的hackery来伪造这个，并且应该使用opacity作为这个努力的一部分，请注意，这也是（如上面的spec中的变换样式）不应用于最终节点。 比方说，除了1上的不透明度， .el ，你在这里是好的，因为.el是最后一个节点，但是如果不透明度被应用到.scroll ，就会像溢出.el产生相同的.el 。
还没有在iOS上testing，因为我无法访问设备。
注意：设置正文以外的溢出值不会在大多数支持3D转换的桌面浏览器上导致此问题。 我不知道关于iOS /手机。
该共享片段也不适用于Mozilla Firefox。 以下是针对iOS Safari / Chrome（iPhone-6S），Windows Mozilla / Chrometesting的解决scheme：
不需要使用-webkit-overflow-scrolling 。 这个function可能有一个bug，因为它正在开发中[参考链接] 。 删除此属性会生成所需的行为。 这可能不是确切的解决scheme，但它可以作为解决方法。
.scroll {perspective:300px;overflow-y:scroll;height:100vh;} .el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}
Codepen： http ://codepen.io/anon/pen/LxZZdX
从这里的这个片段可能会做到这一点。 他们似乎也有这个问题
.outer {`enter code here` overflow: scroll; -webkit-overflow-scrolling: touch; /* More properties for a fixed height ... */ } .inner { height: calc(100% + 1px); }
请检查这个演示： http : //codepen.io/tushar-chauhan/pen/yNgzem
您可以尝试调整值以获得您想要的结果。 这适用于手机和桌面Safari。 我也在这里发布HTML＆CSS：
下面的CSS和HTML：
body{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .pers{ -webkit-transform-style: preserve-3d; -webkit-perspective: 300px; height: 120vh; margin: 0 auto; overflow-y: auto; } .scroll { height: inherit; -webkit-overflow-scrolling:touch; } .el { width: 10em; height: 10em; background: url(http://placehold.it/200x200);background-size:cover; margin: 80vh auto; -webkit-transform-origin: 50% 35%; -webkit-transform: rotateX(80deg); transform: rotateX(80deg); }
<div class="pers"> <div class="scroll"> <div class="el"> </div> </div> </div>
