“-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日更新

卫生署！我这么傻。以下，虽然是真的......但是并没有很好地解决这个问题。

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

{perspective:300px;}

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

另外，请尝试将perspective: 300px;移至.scroll。角度似乎随着向上或向下滚动而改变。

原始答案

答案不是真的。在这里尝试剪切的容器内部不能包含3D变换。

问题是overflow-y:scroll按照spec打破了transform-style属性。 overflow-y影响嵌套元素。如果您的问题仍然存在，您可能还必须在-WebKit-transform-style: preserve-3d上使用.scroll声明，但我认为iOS已经在这种情况下建立了堆叠上下文（Firefox需要这样，Webkit似乎没有）。 / p>

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

如果是这种情况，你需要使用变换和一些聪明的hackery来假装，并且应该使用不透明度作为这项努力的一部分，请注意这也（如上面的规范，在变换样式下面）导致未应用于最终节点时的展平效果。我们假设你.scroll上的不透明度不是1，你在这里没问题，因为.el是最后一个节点，但如果不透明度适用于CSS transition，那么同样的扁平化:hover与溢出一样发生。

还没有在iOS上测试，因为我无法访问该设备。

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

Answer 2

我认为这是苹果公司尚未修复的错误。 解决此问题的唯一方法是将具有较高高度和透视图的容器放在元素周围，然后使上部容器滚动它。

<div class="pers">
  <div class="scroll">
     <div class="widerHeight">
       <div class="el">
       </div>
     </div>
  </div>
</div>

。

.pers {/*perspective:300px;*/}
.scroll {overflow-y:scroll;-webkit-overflow-scrolling:touch;height:100vh }
.widerWidth {min-height:1000px;perspective:300px;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

Answer 3

共享代码段也不适用于Mozilla Firefox。以下是针对iOS Safari / Chrome（iPhone-6S），Windows Mozilla / Chrome测试的解决方案：

无需使用-webkit-overflow-scrolling。此功能可能存在错误，因为它正在开发中 [Reference Link]。删除此属性会生成所需的行为。它可能不是确切的解决方案，但它可以作为一种解决方法。

.scroll {perspective:300px;overflow-y:scroll;height:100vh;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

Codepen：http://codepen.io/anon/pen/LxZZdX

Answer 4

来自HERE的代码段可能会这样做。他们似乎也有这个问题

.outer {`enter code here`
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

Answer 5

请查看此演示：http://codepen.io/tushar-chauhan/pen/yNgzem

您可以尝试调整值以获得所需的结果。这适用于移动和移动设备。桌面Safari。我发布了HTML＆amp; CSS也在这里：

CSS＆amp; 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>