Fixed div in Mobile Safari

Question

Level 4

1,785 points

Fixed div in Mobile Safari

Does any one know of a way to created floating div elements for mobile safari. Safari on the desktop of course supports this, but mobile safari and UIWebView do not seem to. Work arounds and suggestions welcome.

Thanks in advance for all advice.
Rakesh

Macbook, Mac OS X (10.5.3)

Posted on Jun 30, 2008 8:15 PM

Reply

Answer 1

orangekay

Level 5

4,085 points

Jun 30, 2008 9:35 PM in response to sptrakesh

Are you referring to a div with fixed positioning? I haven't had any problems with those at all.

Reply

Answer 2

sptrakesh Author

Level 4

1,785 points

Jul 1, 2008 5:46 AM in response to orangekay

Yes. I have something along these lines:

// In CSS file
.navigation
{
background-color: #336699;
position: fixed;
top: 80px;
left: 0;
height: 50px;
width: 100%;
padding: 5px;
vertical-align: middle;
}

// In HTML file
<div id='navigation' class='navigation'>
<span id='welcome'><a href='javascript:welcome()'>Welcome</a></span>
<span class='separator'>|</span>
<span id='rules'><a href='javascript:rules()'>Rules</a></span>
<span class='separator'>|</span>
</div>

This works fine when I test with desktop Safari but not on the simulator (Safari or UIWebView).

Thanks for all help.
Rakesh

Message was edited by: sptrakesh

Reply

Answer 3

orangekay

Level 5

4,085 points

Jul 1, 2008 8:01 AM in response to sptrakesh

You're going to have to be a lot more specific than "it doesn't work."

Reply

Answer 4

uprise78

Level 1

100 points

Jul 1, 2008 8:22 AM in response to sptrakesh

position: fixed is a known bug in Mobile Safari.

Reply

Answer 5

sptrakesh Author

Level 4

1,785 points

Jul 1, 2008 8:50 AM in response to orangekay

Sorry, the fixed div scrolls off the viewport when I scroll unlike with desktop Safari where it stays in position.

Reply

Answer 6

orangekay

Level 5

4,085 points

Jul 1, 2008 9:06 AM in response to uprise78

I have not had any problems with it. Does it only surface under certain circumstances?

Reply

Answer 7

sptrakesh Author

Level 4

1,785 points

Jul 1, 2008 9:36 AM in response to orangekay

Could you post a small working piece of code for testing?

Reply

Answer 8

uprise78

Level 1

100 points

Jul 1, 2008 12:24 PM in response to sptrakesh

Here is some nonworking code:

http://www.launchpadhq.com/blog/2007/07/02/positionfixed-iphone-safari-woes/

Reply

Answer 9

sptrakesh Author

Level 4

1,785 points

Jul 14, 2008 5:49 AM in response to sptrakesh

Seems to be a bug (or feature) in mobile Safari.

Reply

Answer 10

Jul 29, 2008 1:16 PM in response to sptrakesh

I have the same problem. I just noticed that a small but critical position:fixed page element I’m using is ... well, it’s definitely not “fixed” in mobile Safari. It scrolls of the screen, instead of remaining on the page the way I want it to. This is a bit of a deal-breaker the way I’m using it. A few % of my visitors are on iPhones, so yikes. They’re pretty much hosed until I find a workaround. I’ll post here again if I find anything.

Reply

Answer 11

Aug 11, 2008 3:10 PM in response to Paul Ingraham

Anyone happen to come across a workaround for the fixed background issue in mobile Safari? Is it a rendering issue that Apple omitted so they wouldn't have to deal with it, or is it an actual bug?

Reply