Question

I stumbled upon this problem and it took my a while to realise what it was because there isn’t a straight answer anywhere.

The problem was that when my page loaded, my iScrolls didn’t work: The scroll bars disappeared and the sliding was broken too. It only fixed itself when I resized the window. Using refresh() didn’t help, and the HTML structure seemed fine. Answer below.

Answer 1

The problem wasn’t in my iScroll code or my HTML. It was in my CSS:

Because of the way browsers render pages, if your container has display:none; (in my case I was using dynamic classes to show/hide content), iScroll can’t calculate, go nuts and dies until a resize wakes it up.

Solution: Use visibility:hidden; or opacity: 0; instead.