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

Question

I've run into a very annoying issue only on iOS Safari 9+ (8.4 is fine) where, once the user quickly scrolls a page resulting in anchor links within fixed elements no longer being clickable due to the appearance and actual click/hit area not lining up with its element until the user scrolls again.

It doesn't happen the same way every time, and can take a few tries to "break" the system. Content must be longer than the viewport for this to work.

No workarounds to the problem yet. How can I solve this issue?

UPDATE: After further testing, the issue only happens with iOS Safari 9 and above, tested on iOS 8 and there is no problem.

UPDATE 2: It's now clear that this happens on most websites using position:fixed; and even position:-webkit-sticky;. You may want to check yours :)

HTML

<section>
  <article></article>
  <article></article>
  <article></article>
</section>

<div class="sticky">
  <a href=""></a>
</div>

CSS:

html, body {
  margin:0;
}

article {
  display: block;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  background: whitesmoke;
}

.sticky {
  width:100%;
  height:100px;
  position: fixed;
  bottom:0;
  background: orange;
  text-align:center;

}

.sticky a {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: yellow;
}

http://codepen.io/toobulo/pen/dGEodo

The issue doesn't happen within Codepen editor, as it's related to mobile Safari's elastic / toolbar size changes. Please export code into own page, or use the following link:

https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html

Answer 1

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.