0

I am building an Android app with Phonegap. My screen's corners are darkened by an overlaying PNG image, Markup looks like:

<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 perfectly fine in all desktop webkit browsers, my phone (which is running Android 2.3.5), all Android 2.x AVDs, yet when I launch a 4.0 AVD the rotation of the image is lost (the positioning works the way it should). Is this a bug in the AVD, a bug in Android 4 or am I missing something here? Any input is appreciated, thanks!

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

2.2 AVD screenshot

This is what's happening in 4.0:

4.0 AVD screenshot

Meh!

1 Answer 1

0

Try using all types of rotation just 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 */
1
  • 1
    Doesn't make a difference unfortunately (would be weird though if webkit would use non-webkit vendor prefixes). BTW I think it is considered a good habit to list the non-prefixed property last (so it will override vendor prefixed properties when the property is finally standardized). See: alistapart.com/articles/prefix-or-posthack
    – m90
    Jul 10, 2012 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.