Search code examples
jqueryiosmobile-safari

jQuery Click events not firing on position:absolute <td> tag on iOS after ScrollTop


I've got "Help Docs" on my website for my iPhone App which users view in a UIWebView from within my App. It exhibits some strange behavior. The code below works perfectly on Desktop Safari and Firefox but not mobile Safari. You can see the page here: My Support Page

The help menu is position:absolute and "Sticky" to the top via some techniques on the web. The code uses all the techniques I can find for getting jQuery to fire on such as empty onclick="", cursor:pointer on the element. etc. It works first time, but will not scoll to the NEXT thing a user touches UNLESS you manually scroll the page a little.

There are some other similar questions on Stack but none of the suggestions work for me. Any thoughts. This is my jQuery code.

$(".help-menu-list-item").on( "click", function(e) {
    $(".help-menu td").removeClass("selected");
    $(this).addClass("selected");
    $("html, body").animate(
        {scrollTop: $(".help-item-anchor"+"."+$(this).attr('id')).offset().top}, 'slow'
    );
});

NOTE: I DO NOT Think this is a problem with scrollTop. It think it is an issue with getting click events. If I add the jquery alert() to the above jquery block it does not fire unless the page is first manually scrolled a little. So... this is a click event firing issue... BUT I HAVE TRIED many of the tricks to get click events to fire. Can't work out why they will fire first time but not again until after a manual scroll?

  • UPDATE *

I ripped out all the jQuery based sticky menus and used the iOS 5 support for: position: absolute

along with: -webkit-overflow-scrolling:touch;

... It yields much simpler code for getting a fixed menu sitting at the top, but the jQuery above STILL has the same problem.... I get the first click event, but NOT those after it scrolls to a position unless user manually scrolls page.

SO... is this jQuery or iOS??


Solution

  • This is an acknowledged iOS Safari bug related to fixed position elements. I filed an ADC bug report which was acknowledge to be a dupe of #10301184. Consequently I can't track status. I never found a work around.

    Edited Sep. 18, 2012

    NOTE: I see this bug is now fixed and reported as such in iOS6!! My code is working.