CSS rotation not applied in Android 4.0 web browser

Question

I am creating an Android application using Phonegap. My screen corners are obscured by a PNG image overlay, Markup looks like this:

<div id="tl" class="corner"></div> <div id="tr" class="corner"></div> <div id="bl" class="corner"></div> <div id="br" class="corner"></div> 

and CSS:

 .corner{ background: url('img/corner.png'); position: fixed; z-index: 5; width: 120px; height: 120px; } #tl{ top: 0; left: 0; } #tr{ top:0; right: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } #br{ right: 0; bottom: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } #bl{ bottom: 0; left: 0; -webkit-transform: rotate(270deg); transform: rotate(270deg); } 

This works great in all browsers for web browsers, my phone (which runs Android 2.3.5), all Android 2.x AVDs, but when I launch 4.0 AVD, the rotation of the image is lost (positioning work as it should be) . Is it an error in AVD, an error in Android 4, or am I missing something? Any input is appreciated, thanks!

This is what it should look like (works in 2.2 AVD):

This is what happens in 4.0:

Fur!

Answer 1

Try using all types of rotation to be sure.

 transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -o-transform: rotate(45deg); /* Opera */ -moz-transform: rotate(45deg); /* Firefox */