It seems like applying a webkit-transform property on an element or it's parent that has webkit-over-flowing-scrolling: touch completely breaks the scrolling in that scrolling doesn't work at all.
Has anyone experienced this bug and know of a solution?
My current (hacky) solution looks like this:
$container.one 'webkitAnimationEnd', ->
$container.find('.contents').remove()
$container.append('.contents')
Basically i'm removing and then re-adding the contents of the scrollable div after the animation ends. Hopefully someone has a better solution for this.
I'm having the exact same problem, and it only goes away if I ditch -webkit-transform and switch to absolute positioning.
This would be fine, except that absolute positioning leads to lousy performance and choppy animation on iOS, which in iOS 6+ cannot be remedied w/ the previously popular translateZ and translate3D forced hardware acceleration hacks.
I figured out a hack, but it is so hideous and actually ugly that you might not want to read any further:
Take the element we want to apply -webkit-overflow-scrolling:touch to and separate it completely from the element we are applying -webkit-transform to. Use z-index manipulation to cause the scrolling element to appear in the same place it would have originally, while retaining -webkit-transform to cause the original container (now an empty container) to animate into place naturally. In my case this hack falls short though, because the scrollable content will appear suddenly on top of the animated container, instead of sliding in along with it.
