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以使原始容器（现在是空容器）自然地动画到位。在我的情况下，这个黑客不足，因为可滚动的内容会突然出现在动画容器的顶部，而不是随之滑动。