Viewer header "hops" when scrolling, sticks to middle of viewport

[ghing]

Originally reported in #922 by @jwirfs-brock:

On production, I'm observing this on my Galaxy Nexus, screen resolution 1280 x 720, running Android 4.2.2, in the vertical (portrait) orientation.

I was looking at the story, "HVAC Visualization." On the summary section, the title ended up in the middle of the screen after scrolling. On the next section, the title ended up at the bottom of the screen after scrolling.

I'm also seeing this on my HTC One V.

[ghing]

This issue doesn't happen when a desktop browser window is resized to match the mobile browser. It's specific to the Android mobile browser. I haven't tried testing on iOS Safari.

[ghing]

I'm also able to replicate this in the Android Emulator.

[ghing]

It seems like fixed positioning (which is what we're using here) can be a little weird on some mobile browsers. http://bradfrostweb.com/blog/mobile/fixed-position/ has a breakdown. Still, it seems like this should work for Android 4 which is running on my phone and the emulator.

A few other mentions of fixed positioning weirdness:

• http://stackoverflow.com/questions/19997621/android-browser-2-3-6-fixed-header
• http://stackoverflow.com/questions/11367806/enable-real-fixed-positioning-on-samsung-android-browsers
• https://github.com/scottjehl/Device-Bugs/issues/3

[ghing]

@jwirfs-brock, my experience is that this seems to happen the faster I scroll (or the longer I swipe more accurately). If I scroll slowly, I don't see the issue, or the header is only a few pixels from the top of the screen (rather than in the middle). Is this also what you're seeing, or do you get this even when you scroll slowly?

[jwirfs-brock]

@ghing Yes, I am observing that, too. When I scroll slowly, the title stays near the top, but always seems to have a small gap (that is, I can't seem to scroll enough to have no gap).

[ghing]

I changed up when the header stickiness is toggled, and this feels a lot better to me. @jwirfs-brock, can you test this out on your phone and let me know what you think?

[ghing]

Confirmed as fixed and deployed into production.