position:fixed not working on android when having horizontal scrollbar
Reported by
vnexs...@gmail.com,
Sep 23
|
|||||
Issue descriptionSteps to reproduce the problem: 1. on android chrome have a horizontal scrollbar on the body or container div 2. set position:fixed on a div 3. note that it works as absolute What is the expected behavior? should work as position:fixed What went wrong? works as absolute when having horizontal scrollbar Did this work before? No Does this work in other browsers? N/A Chrome version: 69.0.3497.100 Channel: stable OS Version: 6.0.1 Flash Version: this problem has been mentioned here: https://stackoverflow.com/questions/18607215/fixed -positioned-header-persists-on-desktop-but-not-on-mobile#18607841 https://stackoverflow.com/questions/49098023/fixed-header-not-fixed-when-there-is-horizontal-overflow currrent fix is not to have horizontal scrollbar or as mentioned in the links above, to have meta user-scalable=no
,
Sep 25
,
Sep 25
,
Sep 25
,
Sep 25
This is working as intended. Fixed elements stick to the layout viewport. The layout viewport is sized to be the size of the visual viewport at minimum scale. When you have content that's wider than |width=device-width|, this means that the page can _zoom out_. When you add initial-scale, you're now zoomed in so that the visual viewport is smaller than the layout viewport. What you see in the posfix.htm example posted, scrolling starts by scrolling the visual viewport so the fixed element leaves the screen. If you zoom all the way out, you'll see the fixed element is fixed as expected. One solution is to add a minimum-scale=1 so that the layout viewport will be sized to the visual viewport at scale 1. However, this means you can't zoom out. The better solution is to ensure your page fits on a mobile screen by having the layout fit into the layout size at |width=device-width|.
,
Sep 25
Thanks for the analysis, David! |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by chelamcherla@chromium.org
, Sep 24