There's a scroll bug in IOS Safari

Question

I have the the third generation iPad with a retina display with the latest version of IOS 8.2. If you open Safari and go to the page below which I have created as a test.

http://bagaren-se.dev.sitedirect.se/test.html

If you hold your iPad in landscape mode and click on the button "Click to show/hide" then a fixed div is shown with some dummy text in it. You can now scroll the content of that div. If you click "Click me!!" in there another hidden div is shown with some more dummy text and you can still scroll the content in the div, but...

If you now close the second div by clicking "Click me!!" again and the you close the first div by clicking the first button again. Then you turn your iPad to see the page in portrait mode and do the same thing, the content of the div does not scroll when you try to scroll it, just the background! Why is this and is there a way around it?

If you leave the "Click me!!" div content open when you close the first div and then open the first div again, then it all works.

The first div have max-height:760px; and overflow:auto; set.

Do you see the problem? The way I see it, the content of the first div should always scroll if it's height is larger that 760px, but it doesn't work in Safari IOS 8.2. Is there a hack to get around this problem? The div must be position:fixed;.

Solution

We encountered something similar. Scroll just stopped in some views after upgrade to ios 8.2. This is in a div that fills with content dynamically. This helped me ion the track: http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

We applied the fix as a hack for ios only with JavaScript (since we use angular it's really a directive).