In chrome and "some" mobile browser's the sticky header get's wobbly (when positioned fixed) if it has more complex image/font render-complexity.
The bug is nicely described here (even with a video): https://stackoverflow.com/questions/44679794/position-fixed-on-chrome-mo...
The sticky header could be changed to use position: sticky.
https://getbootstrap.com/docs/4.0/utilities/position/#sticky-top
But this shall be handled in another issue, as it will be quite tricky, or even not appliable, when the page_top region is not meant to be sticky, see: https://stackoverflow.com/questions/43707076/position-sticky-not-working...
Adding minimum-scale=1.0 to the viewport makes the fixed element truly fixed at the top of the page constantly.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | 3033775-chrome_sticky_compability-5.patch | 1.01 KB | ytsurk |
Comments
Comment #2
ytsurkThe patch
Comment #3
ytsurkComment #4
ytsurkComment #5
ytsurkAlso adding the device-height.
Although the sticky header was no longer "wobbling" after adding
transform: translate3d(0,0,0);to kick in hardware-acceleration.Comment #6
ytsurk