I cannot convert CSS3 and Google Maps to play together in Android 2.2 WebView. Here is a fiddle , with two buttons for testing conversions. You will need to enable "Emulate touch events" in Chrome to be able to click on them on the desktop. The device I'm using has a 1024x600 screen.
If I am not doing anything special, blinks when the transformation begins. Now, if I add -webkit-backface-visibility: hidden to the element to which I am applying the transform, everything is silky and there is no flickering, but the map becomes incredibly slow and you cannot just scroll.
I tried to get around this by removing -webkit-backface-visibility, setting it to visible. This works, and the map will be fine again, but setting the property causes a flicker. I also played with the -webkit-perspective and -webkit-transform-style, which also seems to get rid of flicker at the start of the conversion, but also causes flicker when deleted.
I also noticed that applying '-webkit-backface-visibility: hidden' to any page element causes the flicker to disappear at the beginning of the transformations. So I put a small div with the property on it, and when the transformations were done, I hid it with "display: none". It also causes flickering.
My question is this: how can I get the visibility of -webkit-backface (what do I need to do the conversion without blinking) and Google Maps without making the maps slow?
source share