Search code examples
cssios8mobile-safaricss-position

Fix div to bottom without using css position

I am having issues with position: fixed; on IOS8 Safari. I've determined it's related to the footer div which I am positioning at the bottom of the page. I've also tried position: absolute; but that didn't work either.

Does anyone know of a way to position this without using CSS position?

Here is the code I'm using:

.foot-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
}
Solution

  • iOS has issues with fixed positioning. When swiping to scroll, it will not update the fixed position until the tap/drag is released.

    While position: fixed; technically works, mobile Safari does not redraw the fixed element while the scroll is happening in order to properly calculate the over-scroll animation (dragging and releasing causes the page to keep scrolling based on the speed of the swipe), so it won't update until the animation has stopped.

    You could, theoretically, use JavaScript to manually update the element's position a bunch of times while dragging occurs, but that will override the default, natural behavior of mobile Safari.

    More reading material and examples, if you're interested: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios