Fixed elements aren't clickable when I quickly scroll to the bottom in iOS Safari 9+ Fixed elements aren't clickable when I quickly scroll to the bottom in iOS Safari 9+ ios ios

Fixed elements aren't clickable when I quickly scroll to the bottom in iOS Safari 9+


This problem is related to the bounce effect in ios and losing the toolbar & the header bar. The only way that i have found to fix this is to do the following:

html,body {  height: 100%;  width: 100%;  overflow: auto;  -webkit-overflow-scrolling: auto}

You could do it on a breakpoint as well so it only works for mobile. Hope this helps.

** Added the overflow scrolling.


I found that andy jones's answer effectively fixed this problem for me, but it had an unwelcome side effect: momentum scrolling no longer worked. This made scrolling down long pages on an iPad take forever.

Combining andy's answer with this tidbit from CSS tricks made my links clickable while also allowing for momentum scrolling:

html,body {  height: 100%;  overflow-y: scroll; /* must be scroll, not auto */  -webkit-overflow-scrolling: touch;}

I also found that the width: 100% style from andy's answer was unnecessary, so I removed that as well.


You can make .sticky a link absolute and apply following CSS so the link will be independent to the window/browser.

.sticky {  width: 50px;}.sticky a {  position: absolute;  top: 0;  bottom: 0;  margin: auto;}