Webkit 溢出滚动触摸与 Webkit 转换冲突

Question

似乎在元素或其父元素上应用webkit-transform属性webkit-over-flowing-scrolling: touch完全破坏了滚动中的滚动根本不起作用。

有没有人经历过这个错误并知道解决方案？

Answer 1

我当前的（hacky）解决方案如下所示：

$container.one 'webkitAnimationEnd', ->
  $container.find('.contents').remove()
  $container.append('.contents')

基本上，我在动画结束后删除然后重新添加可滚动div 的内容。希望有人对此有更好的解决方案。

Answer 2

我遇到了完全相同的问题，只有当我放弃-webkit-transform并切换到绝对定位时，它才会消失。

这很好，除了绝对定位会导致 iOS 上的性能不佳和动画断断续续，在 iOS 6+ 中，这无法使用以前流行的translateZ和translate3D强制硬件加速黑客来补救。

我想出了一个黑客，但它是如此丑陋，实际上很丑陋，你可能不想再读下去了：

获取我们要应用-webkit-overflow-scrolling:touch的元素，并将其与我们-webkit-transform应用的元素完全分开。使用z-index操作使滚动元素显示在它原来的同一位置，同时保留-webkit-transform以使原始容器（现在是空容器）自然地动画到位。就我而言，这个技巧不足，因为可滚动的内容会突然出现在动画容器的顶部，而不是随之滑入。