A hacky way to remove the “Reader” button in iOS Safari

Posted at December 28, 2012

We are creating mobile webbased-app for the iPhone called RandomApp. RandomApp is a compass like app that guides you through cultural venues in Amsterdam. Normally I set the apple-mobile-web-app-capable meta tag so that when the app gets added to the homescreen it runs chromeless (without the footer bar and the URL bar). However, due to a bug in iOS 6 (which has been fixed in the 6.1 beta) we can’t use this feature.

When you are building a webapp you want to hide the URL bar so you have more space available for you app. However when you have a certain amount of text on the page Safari offers the user a Reader button inside the URL bar. The consequence is that the URL bar won’t be hidden for at least five seconds. This shouldn’t bother you because it’s a great feature, except when you are trying to build an app with functionality instead of plain content.

Problem

We noticed the button appearing after adding a lot of content on the mainscreen. While we want to keep this content we wanted to remove the button. After trying some things out we noticed that the reader button didn’t only appear after we added content to the HTML, but that it looked at the DOM tree. So after adding the content via javascript to the DOM the button also appeared.

Solution

When you know exactly what your content is going to be you can use this hacky solution:

Inject a part of the text in CSS (just enough to hide the button)

So instead of doing:

<h1>Welcome to RandomApp!</h1>

Do:

<h1 id='title'></h1>

And in your css:

#title:before {
  content: "Welcome to RandomApp!";
}

Posted at December 28, 2012, under apps.