mobile safari – window.scrollto menu bar not hidden

Most front-end devs know the trick: scrolling 1px down on mobile sites at document load, to hide the address bar on mobile devices. It worked fine for me, but not on all pages. Why not?

I was working on a mobile website last week, which had a bit of code that hides the browser’s address bar:

setTimeout(function () {
  window.scrollTo(0, 1);
}, 500);

I was asked to investigate the problem the client experienced: on some pages the address bar hid right away, and on other pages it didn’t for +/- 5 seconds or so.

Because it was a piece of javascript that seemed to be the cause, I changed the setTimeout to 2000ms and the scrolling distance to 100px, just to see how the browser would behave. I didn’t expect to see the page scroll immediately. The address bar was still visible and the javascript had done it’s window.scrollto.

Long vs short pages

I decided to simply compare the pages. Pages that had the problem vs. pages that didn’t have the problem. I found that pages which had more text had something to do with the address bar not hiding on time.

Mobile Safari’s Reader

The problem turned out to be Mobile Safari’s ‘Reader’. On pages with a certain amount of text, a button with the text ‘Reader’ appears in the address bar:

The 'Reader' button in mobile safari

My guess is that because of this button the address bar stays visible for a longer time (+/- 5 seconds). I think this is done to give users the time the use the button before it disappears

The ‘solution’

As far as I know there isn’t a way to disable the Reader button in mobile Safari on normal websites. There’s two things you could do though to ‘fix’ the problem:

  1. Make all pages behave consistently:
    In my case the client noticed the address bar problem because it behaved differently on certain pages of their website. If the window.scrollto code hadn’t been added to the site, this problem wouldn’t hav existed. Remove the javascript and the client may be happy.
  2. Make your website ‘webapp capable’ with this meta tag: (meta tag)(more info). Users will need to add the website to their ‘springboard’ to make it work, but it makes it possible to hide the address bar completely.

edit:
The window.scrollto method doesn’t seem to work in Mobile Safari on iOS7 because of changed browser behaviour. Too bad, but we still have Android!