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

@rhgb I've added the CSS I'm using. When I remove the position style the footer appears near the top. If I keep it, it looks great but causes scrolling issues on IOS8 Safari. — Clinton Green, Oct 01 '14 at 02:51
I don't understand why you don't clear:both and have it be positioned statically, is your page really tiny? — Christina, Oct 01 '14 at 05:45
@Christina The site is geared for mobile so yes very tiny, and I don't know how to ensure it will stick to the bottom without position fixed or absolute — Clinton Green, Oct 01 '14 at 20:01
I believe that @Quantastical referred to the way jQuery mobile does it. Here's a couple options. Look at the CSS. Works on load best. http://jsbin.com/qiquca/1/edit — Christina, Oct 01 '14 at 20:32
Thanks @Christina unfortunately that didn't solve my issue but I appreciate the help :) — Clinton Green, Oct 02 '14 at 01:15
its crazy that this issue still exists to this day in iOS 12.3 — oldboy, Jun 16 '19 at 04:45

score 11 · Answer 1 · answered Oct 09 '14 at 20:43

11

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

answered Oct 09 '14 at 20:43

Jason Lydon

7,074
1
35
43

Thanks that's something I never knew existed! – Clinton Green Oct 10 '14 at 00:52
This worked for me when I had the same issue with iOS 8. – Gratus D. Jan 29 '15 at 20:07
1

it shows a warning on the css when trying to use "position: sticky" in safari, are you sure is still available? EDIT: Oh nvm, it was -moz-sticky :) thanks! – msqar Jan 26 '17 at 22:14

jeffjenx · Accepted Answer · 2014-10-01T03:07:57.567

5

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

edited Oct 01 '14 at 03:07

answered Oct 01 '14 at 02:58

jeffjenx

17,041
6
57
99

I did see that article but thanks for the explanation. I'm still holding out to see if anyone has any bright ideas on positioning but if that doesn't happen I'll accept your answer. Cheers – Clinton Green Oct 01 '14 at 03:29
2

The way jQuery mobile does it is by putting the non-fixed content inside of a scrollable div that would extend from the top of the window down to the bottom of the page minus the height of the fixed content. Other than that, JavaScript polling of the scroll event is the only option, but even if you were to rewrite the drag/release slide effect (I tried), preventing the default scroll event will also stop the rubber-band over scroll, which cannot be re-emulated in JavaScript alone. – jeffjenx Oct 01 '14 at 03:46
I couldn't find a way to solve my issue but this answer explains why the issue is happening. Thanks – Clinton Green Oct 02 '14 at 01:17
I eventually found the cause and did not have to bother with positioning. IOS8 Safari cannot handle transitions anymore, that was causing all the problems. Removed them and it works. – Clinton Green Oct 09 '14 at 03:01

Fix div to bottom without using css position

2 Answers2

Linked