Android Default Browser: Google Maps makes "position: relative" elements scroll over the top of the page

Question

I'm having a weird error debugging the default Android Browser with Google Maps and position: relative element.

On every other mobile browser it's fine, but when using JS to create a Google Maps element it begins floating over the top of the screen - like some kind of parallax effect. Furthermore other position: relative elements seem to scroll with it. If I hide the Maps element the pos: relative elements behave normally again.

The existing rules on the element are:

• position: relative;
• background-color: rgb(229, 227, 223);
• overflow: hidden;
• -webkit-transform: translateZ(0)
• z-index: 0;

If I set transform to "none" or z-index to "-1" then the problem stops, however the Maps element is removed or doesn't respond to panning etc.

Any help would be appreciated.

Thanks :)

Answer 1

Too bad there's no "inspect element" on Android!

Have you tried the simple option of wrapping the div in question in a parent div? Perhaps maps is modifying the parent div (ie your div)? It seems a logical answer, especially if maps is 'magically' affecting other divs too.