IOS scrolling sometimes gets stuck

Question

I came across strange safari behavior on iphone (iOS 9.2)

If you see this http://jsbin.com/vofubidaxe page on your desktop, there are 3 panda images and you can scroll them

But if you see it on an iphone safari, sometimes (not all the time) you cannot scroll it. The scroll seems to be stuck (not sure if it’s stuck - this is the right word to describe the behavior)

Edit here http://jsbin.com/vofubidaxe/edit?html,css,output

The bottom line is https://gist.github.com/anonymous/938fc5f84222d8ed06cdcb7f6092da8d

The nav tag has position: fixed, if this is removed, scrolling resumes normally.

Sorry if this is a known safari bug. How can this be fixed?

Answer 1

Adding position:fixedto an element removes it from the DOM document - therefore panda images are not displayed in the actual document.

Sometimes it gets stuck because it’s possible that your affected bubble is up to the document - so clicking it causes the document to scroll, rather than a fixed element.

The solution is to remove the relative element and give the height to the fixed parent element - if you want its full height, try adding top:0;right:0;bottom:0;left:0and then overflowing it.

However, this will work on the iphone, but will cause problems for other devices - Android, Windows phones, etc. due to poor support of the overflown element.