Html &引用-webkit溢出滚动：触摸“；断开css三维透视图

仅为iOS safari搜索解决方案

使用

-webkit overflow scrolling:touch

时，它会中断iOS上的3d透视图

请参阅上的演示

HTML

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

---

有解决办法吗？

5月29日更新

啊！我太傻了。下面这句话虽然是真的，但并不能很好地回答这个问题

如果希望旋转配置与图示相同，请在

.scroll

和

.el

之间添加一个div，并将其设置为：

{perspective:300px;}

因此，您似乎希望使用

.scroll

切换

.pers

div，或者在

.scroll

之后添加另一个具有相同透视图的div

另外，尝试移动

透视图：300px至
。滚动
。当向上或向下滚动时，角度会发生变化


原始答案

答案并非如此。不能将三维变换包含在带有此处尝试剪切的容器中

问题是
overflow-y:scroll
会根据中断变换样式属性。溢出-y影响嵌套元素。如果问题仍然存在，您可能还必须在
.scroll
上使用
-WebKit转换样式：preserve-3d
声明，尽管我认为iOS已经在这种情况下建立了堆叠上下文（Firefox需要，WebKit似乎不需要）

一种解决方案是从
正文中删除
溢出：隐藏的
，并从
中删除
溢出-y:scroll
。scroll
，但我怀疑您希望将其作为页面/屏幕的一小部分，并在其中移动图像块

如果是这种情况，您将需要通过变换和一些巧妙的黑客手段来伪造它，并且应该使用不透明度作为这项工作的一部分，请注意，这也会在不应用于最终节点时导致展平效果（如上面的规范所示，在变换样式的正下方）。假设您在
.el
上的不透明度不是1，您在这里很好，因为
.el
是最后一个节点，但是如果对
.scroll
应用了不透明度，则
.el
的展平效果与溢出效果相同

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

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


请检查此演示：


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

CSS和HTML如下：

正文{
宽度：100%；高度：100%；边距：0；填充：0；溢出：隐藏；
}
伯斯先生{
-webkit变换样式：保留-3d；
-webkit透视图：300px；
高度：120vh；
边距：0自动；溢出y：自动；
}
.卷轴{
身高：继承；
-webkit溢出滚动：触摸；
}
艾尔先生{
宽度：10em；高度：10em；背景：url(http://placehold.it/200x200)；背景尺寸：封面；
保证金：80vh自动；
-webkit转换来源：50%35%；
-webkit变换：rotateX（80度）；
变换：rotateX（80度）；
}
共享代码片段在Mozilla Firefox上也不起作用。下面是针对iOS Safari/Chrome（iPhone-6S）、Windows Mozilla/Chrome测试的解决方案：

无需使用
-webkit溢出滚动此功能可能存在缺陷，因为它正在开发中。删除此属性将生成所需的行为。这可能不是确切的解决方案，但它可以作为一种变通方法

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

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

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

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

我认为这是苹果尚未修复的缺陷。
解决这个问题的唯一方法是在元素周围放置具有较高高度和透视图的容器，然后使上面的容器滚动它

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

这是一个奇怪的bug，不幸的是
转换：translateZ（0）适用于其他<代码>-webkit溢出滚动：触摸bug似乎没有帮助。顺便说一句，我认为您的代码笔可能缺少一些代码，因为删除
-webkit溢出滚动：touch也不能让它工作。这里有一个代码笔向我展示了这个问题：有人知道苹果的路线图上是否有使用动量实现本机
溢出
（没有所有的
-webkit溢出滚动：touch；
混乱）吗？任何链接都值得赞赏。惯性滚动不是我所知道的任何规范的一部分，因此它可能不会被取消。溢出和
-webkit溢出滚动似乎有问题。移除溢出和透视图是正确的，但溢出没有正确处理。@AndrewLi刚刚测试了移除
overflow-y:scroll从
。滚动
：它无法纠正仍然平坦的透视图。。。在iPadCan的分叉版本上进行测试，您可以提供实时演示链接吗？也许问题不太清楚，但它只是关于iOS Safari mobile。它在其他浏览器上工作得很好。所以我只是在寻找一个解决方案。今天晚些时候，当我可以使用我朋友的iPhone时，我会尝试一下。毫无疑问，滚动触控黑客正在干扰3D。这很可能无法修复，因为iOS webkit对桌面Safari和Chrome显示正确的3D转换有一些有趣的解释。你还需要iPad，还是只需要手机？不幸的是，这并不能回答这个问题。无论如何，谢谢您的参与；）你能提供你最后一个答案的密码笔来澄清吗？thx；）很抱歉再次打扰您，但您似乎有解决方案，但不幸的是，我无法真正理解您的解释。你能不能只提供一个密码笔来订购IC
<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);}