'Bottom fixed div keeps jumping when scrolling on iPhone

I am working on a responsive design where I have a div container that should be fixed at the bottom of the viewport. The problem is that the div keeps moving when I scroll up/down the page and it takes a little while until its back in its fixed position.

Does anyone have an idea how to fix this jumping around? What else can I do than position: fixed and bottom: 0?

Thanks!! :)

iphone


Solution 1:[1]

Using position: sticky; instead of position: fixed; solved jumping problem on iOS for me.

Solution 2:[2]

did you try:

-webkit-backface-visibility: hidden; backface-visibility: hidden;

or maybe

-webkit-overflow-scrolling: touch

Hope this helps you !

Solution 3:[3]

There is a great article here. In my case I had the fixed element inside of the scrolling div. Once I placed it outside, no more jitters.

https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

Solution 4:[4]

For my current project, I had a <nav> element with a fixed position nested inside a <header> element with its own fixed position (semantically it could make sense to nest the nav the header for the DOM tree, but visually we wanted them to appear in separate places within the UI). Moving the nav out of the header, making it an immediate child of the <body> element, solved the problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 smohadjer
Solution 2 Aleksandar Misin
Solution 3 Jacksnap13
Solution 4 2540625

Related Questions