Bug

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