`-webkit-overflow-scrolling：touch;`破解css 3d透视图 [英] `-webkit-overflow-scrolling:touch;` breaks css 3d perspective

问题描述

只搜索 iOS safari的解决方案

当使用 -webkit-overflow-scrolling：touch; / p>

查看演示：。 overflow-y影响嵌套元素。如果您的问题仍然存在，您还可能需要使用 .scroll -webkit-transform-style：preserve-3d c>，虽然我认为iOS已经有堆栈上下文建立在这种情况下（Firefox需要这个，Webkit似乎不）。

一个解决方案是删除您的< c $ c> overflow：hidden from body 和 overflow-y：scroll code> .scroll ，但我怀疑你要把它作为页面/屏幕的较小部分，并在其中移动图像块。

如果是这样，你将需要使用transforms和一些聪明的hackery伪造这个，并且应该使用opacity作为这个努力的一部分，请注意这也太（如上面的spec， -style）在未应用于最终节点时导致展平效果。假设你在 .el 上有不透明度1，你这里很好，因为 .el 是最后一个节点，但是如果对 .scroll 应用不透明度，则会出现与溢出相同的展开 .el 。 >

尚未在iOS上测试，因为我无法访问设备。

注意：设置溢出值在支持3D转换的大多数桌面浏览器上，正文不会导致此问题。我不知道iOS / mobile。

Searching for a solution for iOS safari ONLY

--

When using -webkit-overflow-scrolling:touch; it breaks the 3d perspective on iOS...

See the demo: 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);}

Is there a workaround?

解决方案

Update, May 29

Doh! I so stupid. The below, while true...ish doesn't address the question well enough.

If you want that configuration of the rotation to stay the same as you have illustrated, add a div between .scroll and .el, and style it such:

{perspective:300px;}

Thus it would seem that you want the .pers div switched with .scroll or add another after .scroll with the same perspective.

Also, try moving the perspective: 300px; to .scroll. The angle appears to change as one scrolls up or down.

---

Original Answer

The answer is not really. One cannot contain a 3D transform inside a container with clipping which is being attempted here.

The problem is overflow-y:scroll breaks the transform-style property as per spec. The overflow-y affects the nested element. If your problem persists, you may also have to use the -webkit-transform-style: preserve-3d declaration on .scroll, though I think iOS already has a stacking context established in this case (Firefox requires this, Webkit seems not to).

One solution is to remove your overflow:hidden from body and overflow-y:scroll from .scroll, but I suspect you are going to want to have that as a smaller part of the page/screen and move image blocks inside it.

If this is the case, you will need fake this with transforms and some clever hackery, and should using opacity be part of this endeavor, please note that this too (as in spec above, right below the transform-style) causes the flattening effect when not applied to the final node. Lets say you had opacity other than 1 on .el, you are fine here as .el is the final node, but if opacity was applied to .scroll, the same flattening of .el occurs as with the overflow.

Have yet to test on iOS as I lack access to device.

Note: setting an overflow value other than visible for the body does not cause this issue on most desktop browsers that support 3D transforms. I do not know about iOS/mobile.

这篇关于`-webkit-overflow-scrolling：touch;`破解css 3d透视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！