Fix div to bottom without using css position

Question

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%;
}

Answer 1

You should try position:sticky;. It's made to deal with position on Safari. fixed has been an issue with mobile devices for years. I thought it was fixed but iOs8 has weird behavior too...

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Answer 2

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