Google Maps in iOS 5 content dissapearing bug

8th Nov 2012

Google Maps in iOS 5 content dissapearing bug

I stumbled on this frustrating iOS5 bug where adding Google maps to a page made elements disappear.

Replicating the bug

This bug appears in iOS 5.1 where the size of a negative text-indent value is greater than -9999px

You can view the bug live.

In this example it causes the header content to disappear. I have stripped away CSS till this basic example is left to replecate the bug.

.container { position: relative; z-index: 100; } .indent { display: block; text-indent:-999999px; } .map { background-color:Gray; height:213px; width:220px; }

Here's the markup

<div class="container"> <h1>This will disappear when we load the map in iOS 5.1</h1> <a class="indent" href="/search">Search</a> </div> <div id="map_canvas" class="map"></div>

Now as soon as you initialise the map the whole .container element will dissappear!


There are a few other reasons not to use the negative text-indent for image replacement in CSS so the best solution is to change the method you are using to the one in HTML5 boilerplate.

.ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; }

If you definitely want to use the negative text-indent then you just need to make sure the value doesn't exceed -9999 (eg -99999px). So lob off one of the 9s and you should see the hidden elements again.