Hiding Address Bar in Mobile Safari With Reader Button Visible

Question

Ok, so I'm using the suggested window-scrollTo method and it's working just swimmingly everywhere except for one little sticking point.

When Safari decides to show the "Reader" button figuring I might want to save my page for later reading, it keeps the address bar up for a full 5 seconds before finally hiding it like I asked. Kind of an eternity in UX time.

Is this an iOS 6 thing or did it also do this in iOS 5? (I don't have a 5 device to test it on at the moment.) Also, is there any way to get around it?

Answer 1

I've looked around quite a bit and there doesn't appear to be any way to disable the reader button. The only possible solution I found was to make your site less "readable" so Safari doesn't add the reader button. Exactly what makes a site "readable" is pretty murky.

Here's some research on what makes something "readable": http://mathiasbynens.be/notes/safari-reader

Here's a method to make it less readable by putting your content in CSS: http://askmike.org/2012/12/a-hacky-way-to-remove-the-reader-button-in-ios-safari/

The bottom line seems to be that there is no solution. Hopefully Apple will add a meta tag to disable it or at least let us hide the address bar faster.

Answer 2

Here is what worked for me:

I placed all content inside an ol tag.

<ol style = "padding:0;margin:0"> 
   my content
</ol>

From what I read elsewhere, the reader is partly triggered by the number of words on a page, but does not count words inside an ol.

Answer 3

You can disable the reader button by hiding the content that triggers it.

And then displaying that content 1s after the page loads.

For instance, hide all your <p> elements if they are triggering the reader button.