iphone - 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强制的硬件加速黑客来补救。

我想出了一个 hack，但它是如此可怕和丑陋，以至于你可能不想进一步阅读：

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