Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bottom fixed div keeps jumping when scrolling on iPhone

Tags:

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!! :)

like image 358
Charles Ingalls Avatar asked Apr 05 '13 16:04

Charles Ingalls


2 Answers

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.

like image 111
2540625 Avatar answered Oct 21 '22 16:10

2540625


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

like image 45
Jacksnap13 Avatar answered Oct 21 '22 16:10

Jacksnap13