iOS location bar hiding research

So I’ve been trying to learn about location bar behavior of the iOS Safari browser on the iPhone/iPod Touch, and just wanted to share some of my observations. All of the observations below, are based on a test-case I wrote, which can be found here:

http://webpro.host.adobe.com/people/jblas/research/ios/location-bar.html

---

Observations:

• The dropping of the location bar is triggered by the clicking of a link that has a reference to an external file. - You can preventDefault and stopPropagation on the “click” event so the link does nothing, but the location bar will still drop down. - The location bar does not drop down for links that contain just hashes. - We’re often compared to jQTouch in this department …” Why doesn’t jQTouch have this location bar problem?” and its because they only use internal content so their links all use hashes.

• Loading content via XHR does NOT trigger the location bar to drop down.

• Links with href=”#” cause the document to scroll to the top and the location bar is updated. You need to preventDefault() on the “click” event to kill this behavior.

• Links with hashes to non-existent content do nothing. Location bar is updated though. preventDefault() on the “click” event kills this behavior.

• Updating location.hash does NOT cause the location bar to drop down.

• Calling preventDefault() and stopPropagation() on “touchend” events seem to have no impact on the location bar behavior or the default click behavior.

---

Fastclick Fixes Branch:

Given the observations above, I’m a bit puzzled as to what exactly moving our link click handler to vclick accomplishes. I originally created the branch based on previous discussions I had with Scott that calling preventDefault() on any touch event prevents the location bar from dropping, but I’m not seeing that with my test case above. After thinking about it a bit, I think I know why links in jQM are broken on the fastclick-fixes branch. My touchend handler that does a preventDefault() is called before vclick is dispatched … this is important because when my vclick handler kicks in, it creates a virtual event event based on the native touchend event … since that native event already has preventDefault called on it, the vclick event I create also has its preventDefault set because it copies it off the native event. For a vclick event, if preventDefault has been called on it, it automatically blocks any click events, which is why the links don’t fire.

So now I’m trying to figure out what to do. I still occasionally see the location bar drop down on the jquerymobile.com/test/ site, but it doesn’t happen most of the time. What I’m wondering is if it seems suppressed because we are also scrolling to the top. I just added that to the test case above, but I can’t test that theory since Adobe’s public network, which all my devices communicate through just went off line. < sigh >

Anyways, I’m open to suggestions since the touchend preventDefault() deal isn’t panning out.

• Kin