+ 1

Fixed Elements on Mobile

When viewing the following code on my mobile, the div does not behave fixed as intended - it remains in its position instead of adjusting to the screen when scrolling: https://code.sololearn.com/WmfwIsLd9Pug/?ref=app However, it works if the content size surpasses the screen size only by width or only by height, and in the web version it is fine in any case anyway. So, this got me curious how/why this behaviour is caused (only if width and height surpass screen size), and if there are possibly any workarounds I could use for a code I am currently working on. I even dug up this question from a few months ago that has a similar problem, but it does not really satisfy me: https://www.sololearn.com/discuss/1499536/?ref=app

20th Apr 2019, 5:52 PM
Shadow - avatar
2 Answers
+ 7
Adding to the head: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/> Fixed it for me Source: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/ Demo: https://code.sololearn.com/W2MhC51ns69E/?ref=app
20th Apr 2019, 6:11 PM
Burey - avatar
+ 2
Thank you, Burey! I played around with the sample you provided a bit and it appears to me that defining a minimum scale above 1.0 and therefore preventing zooming out is enough to have it work, while specifying a maximum scale does not work. In that case, user-scalability could be allowed without messing up the fixed element. Not sure why it behaves this way, but anyway, I can include that in my project to fix my problem, so this was very helpful.
20th Apr 2019, 7:11 PM
Shadow - avatar