0

I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).

AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.

Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.

Thanks in advance, Ted

Ted
  • 2,525
  • 2
  • 37
  • 54
  • Isn't this a browser dependent issue? Have you tried different browsers? – Vajk Hermecz Nov 09 '12 at 11:21
  • Question might be duplicate of this: http://stackoverflow.com/questions/7890003/how-to-remove-address-bar-in-safari-in-ios5 – Vajk Hermecz Nov 09 '12 at 11:23
  • I guess that will be a factor. Chrome on iOS doesn't seem to let JQuery Mobile hide the toolbar at all, which is better for the homepage, but worse after that as the ability to have a full screen view is lost. – Ted Nov 09 '12 at 11:24

3 Answers3

0

I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.

Hide URL Bar

MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile Safari on your iOS. Mobile space is limited and this helps to leverage every pixel on the screen to maximize display area.

barry
  • 835
  • 6
  • 14
0

Sadly I've had to resort to a pretty hacky solution to this.

I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.

This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...

Ted
  • 2,525
  • 2
  • 37
  • 54
0

I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.

Supercranky
  • 11
  • 2