CSS вращение не применяется в веб-представлении Android 4.0

Question

Я создаю приложение для Android с PhoneGap. Углы моего экрана затемнены наложенным изображением PNG, разметка выглядит так:

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

и 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);
}

Это прекрасно работает во всех настольных браузерах webkit, на моем телефоне (который работает под управлением Android 2.3.5), во всех AVD для Android 2.x, но когда я запускаю 4.0 AVD, вращение изображения теряется (позиционирование работает так и надо). Это ошибка в AVD, ошибка в Android 4 или я что-то здесь упускаю? Любой вклад приветствуется, спасибо!

Вот как это должно выглядеть (работает в 2.2 AVD):

Вот что происходит в 4.0:

Мех!

Answer 1

Попробуйте использовать все типы вращения, чтобы быть уверенным.

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 */