IOS can't click links in fixed footer until after scroll? [duplicate]

Question

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

Effloresce

Have you tried applying an explicit height to the bar? – Hezekiah

Yea i tried that still no luck. Thanks for your input though. – Effloresce

Only IOS5 and above support the position:fixed property. – Welldefined

Thanks I realize this but even in ios 5 the links become unplugged untill you scroll the window and I think I have found out that this is due to the URL bar going away it pulls the links up with it. – Effloresce

This is interesting. I experienced the same with fixed elements on iOS 5. When you play video on a page with fixed elements (even after you stop it) all fixed elements will move with the scroll and move back to their original position after the scroll. I couldn't find a solution to this yet eather. So maybe this is a bug in iOS 5. But here's a post that might help you: #743623 – Lillis

I've also seen this problem on fixed elements in ios5. First click works, second click does not until after scroll. Strange. – Forced

Answer 1

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.

Chromoprotein

I was having the same issues, but adding cursor:pointer fixed the issue... for some reason. That's a really weird solution. I was able to apply this to the entire header of my page (the links themselves being a child 5-6 levels deep). Since it's for mobile devices the cursor style probably won't be noticeable. – Chaisson

Likely you issue was not what I was referring to here. This IS a known bug that is NOT fixed by adding cursor:pointer. On an iPad or iPhone (touch devices) links get touch events, however other things like divs where you use jQuery to attach click handlers WILL NOT get touch events unless you in effect tell iOS that it is touchable by adding cursor:pointer. With that on there you WILL get touch events. – Chromoprotein

Answer 2

Had the same issue. Fixed it by scrolling up and down on orientation change using javascript.

I added the following script to each page, its ugly but it works:

<script type=\"application/x-javascript\">  
    addEventListener('load', function() { setTimeout(orientationChange, 0);}, false);
    var currentWidth = 0;  
    function orientationChange() 
    {   
        if (window.innerWidth != currentWidth) 
        {  
            currentWidth = window.innerWidth;
            var orient = (currentWidth == 320) ? \"profile\" : \"landscape\";
            window.scrollTo(0, 0); 
            setTimeout(function() {window.scrollTo(0, 1); }, 250); 
            document.body.setAttribute('orient', orient);             
        }           
    }

    setInterval(orientationChange, 400);          
</script>

Ketti