在iPad上滚动冻结（javascript）

Question

I develop app for iPad on javascript. I have some div. Content in this div should be scrollable. I added scroll for div using this class:

.scrollable {
 -webkit-overflow-scrolling: touch;
 overflow-y: scroll !important;
 -webkit-transform: translate3d(0, 0, 0);
}

This way works in 90% cases, but sometimes I try scroll content and nothing happened. I wait about 3 sec and try it again - and scroll works. I don't have any workaround javascript code which may lead to such behavior.

Why this behavior can be?

Answer 1

You mentioned that you were loading content dynamically but your fiddle doesn't have that dynamic content load taking place, so I can't answer with a fork of your fiddle, as I would prefer.

However, I just recently had a very similar problem and found that if, after the content is loaded (timing is critical), I set any of the scrollable elements to use -webkit-transform: translate3d(0,0,0); , it seems to resolve the odd "freezing" behavior.

(In my instance, my dynamic content was loaded in with jQuery's $.get shorthand, so I used the .then() to run a function which would automatically set the appropriate CSS every time new content was loaded.)

Let me know if this helps.