“-webkit-overflow-scrolling：touch”打破css 3d透视 [英] "-webkit-overflow-scrolling: touch" breaks css 3d perspective

问题描述

仅为 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）;} 
  

是否有解决方法？

解决方案

5月29日更新 我很愚蠢。下面，虽然真的...... ish并没有很好地解决这个问题。

如果你希望旋转的配置保持不变，在 .scroll 和 .el 之间添加一个div，并将其设置为：

  {perspective：300px;} 
  

因此，您似乎希望 .pers div与 .scroll 切换，或者在<$ c $之后添加另一个c> .scroll 以相同的视角。

另外，试着移动透视图：300px; 到 .scroll 。角度似乎随着向上或向下滚动而改变。

---

原始答案

答案并不是真的。一个不能在包含正在尝试剪辑的容器内包含3D转换。

问题是 overflow-y：scroll 按照打破转换样式属性符合规范。 overflow-y影响嵌套元素。如果问题仍然存在，您可能还必须在 .scroll -WebKit-transform-style：preserve-3d 声明c>，尽管我认为iOS在这种情况下已经建立了一个堆栈上下文（Firefox需要这个，Webkit似乎不这样做）。

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

如果是这样的话，你需要用变换和一些聪明的hackery来伪造这个，并且应该使用不透明度作为这项工作的一部分，请注意这一点（正如上面的spec中，样式）在未应用于最终节点时会导致展平效果。假设您在 .el 以外的其他地方使用了不透明度，您可以在这里以 .el 作为最终节点，但如果对 .scroll 应用了不透明度，则与溢出一样会发生相同的 .el 展平。

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

注意：设置溢出值而非可见因为在大多数支持3D转换的桌面浏览器上，机体不会导致此问题。我不知道iOS /手机。

Searching for a solution for iOS safari ONLY

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

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

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 scroll 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 use 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. Let's 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 the 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屋！