DIVs with position:absolute dissapearing in Android stock browser?
I recently encountered the bizzarre behaviour of the default Android stock browser — an absolutely positioned DIV was not rendered, while still "being there". Knowing where to click I could just use it as always, while jQuery was reporting that DIV is visible.
It turns out adding this little snippet to the DIV's CSS helped:
-webkit-backface-visibility: hiddenThis issue happens since Android Ice Sandwich, yet Google Chrome and Firefox for Android work perfectly.
Written by Paweł Komarnicki
Related protips
7 Responses
Many thanks for this! I couldn't figure out the disappearing divs thing, and you saved me a lot of time. -Kelly
Could this happen on other elements as well?
an A tag and such; and what about an inner element like SPAN that is contained in the "missing" A being rendered instead?
@unleashthedog technically you can just do it for all elements * { ... }, it doesn't matter. For me the whole div was missing, the whole thing.
This exact problem is happening for me in chrome. Not sure why but this didnt seem to fix it for me. Using Nexus 5 with Android 4.4.2 installed. Default browser is now chrome.
Odd thing is that when I connect the phone and remote debug, the div magically appears. The div will also appear for the session when switching orientation. A page refresh and it disappears again.
Any ideas on how my situation is unique?
Oh that could be a bit tricky as Stock Browser is no longer used on Nexus 5 and Android KitKat (Chrome is used, which should work okay), but I would need to see more of the HTML/CSS code to find out why :-)
In htc default browser its still invisible, I added above code but in htc default browser I got no luck.
Alternative way (http://stackoverflow.com/a/13016642/2573869):
-webkit-transform:translateZ(0);
Have a fresh tip? Share with Coderwall community!
