www.engadget.com / www.techcrunch.com - header bar floating away(not fixed position)

[bull500]

URL: http://www.engadget.com/2015/08/19/cochin-airport-runs-on-solar-power/
Browser / Version: Firefox Mobile 41.0
Operating System: Android 5.0.2
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://www.engadget.com/2015/08/19/cochin-airport-runs-on-solar-power/
2. start scrolling down slowly
3. the fixed grey header bar shifts it's position for a certain distance and then returns to the top area after a certain scroll distance.

Expected Behavior:
Header bar should stay fixed floating on the top

Actual Behavior:
Header bar shifts it's position for some scroll distance.

[bull500]

For the techcrunch problem, you'll have to fling scroll to notice the issue.
Engadget needs the user to scroll slowly for the top few top contents of the page.

[hallvors]

The device may be throttling some scroll events in order to save some CPU time and make the page itself scroll more smoothly. I've seen similar effects on Facebook. I think it's an acceptable trade-off to have the rest of the page painted better and the scrolling be smoother - the top navigation will slot into place when those scroll events fire and the page updates the styling.

(This is a bit of guesswork though - if the element is set to position:fixed we may want a smarter scroll algorithm)

[bull500]

@hallvors just found a temp fix solution from IRC - disabling Fullscreen(Settings > Display > Full screen browsing) browsing fixes this.
Something about dynamic toolbar causing this trouble.

More and more sites seem to be using this method of top header bar menu.

Wish fullscreen has this bug fixed soon.

[bull500]

@hallvors this issue has been fixed in Nightly 45 on android as per bug 1214267

[hallvors]

Thanks @bull500 - so it was indeed a position:fixed core problem ;)

[bull500]

@hallvors happy to help. :)
Glad this got fixed before the site redesign. It was an isolated/special case.