Possible Duplicate:
Mobile Webkit reflow issue
I have been trying to figure this out. I have a fixed footer on ios with 4 links in it. Their are also 6 links under it that should not be clickable since they are below. However on ios when unless you scroll the page first the links on the fixed footer do not work and it instead clicks the link below it. After you scroll the slightest bit it works fine. I hope i explained this clearly enough.
You can see an example of it here:
amstar.m77950.com
(view on iphone)
I tried applying z-index to basically every element on the page to see if there was a fix. I also used jquery to make sure that the z-index was being applied onLoad (although it should have been anyway).
Yet i still cannot get the links in the footer to work until after you scroll the page.
Any help on this is much apprceiated. Thanks.
Here is the css i am applying to the element:
.alertsBarClass {
background: url("dynamicimage.aspx?id=21844") no-repeat scroll 0 0 #EA7E25;
border-bottom: medium none;
bottom: 0;
display: block;
position: fixed;
width: 100%;
z-index: 1000;
}
There are known issues with Position:Fixed in iOS 5.1 and anchors/links and scrolling. See the following bug #10301184, #10810232.
One thing that can help...sometimes... is to put cursor:pointer in the divs surrounding your links.