Css rotation not applied in android (phonegap)

Question

I'm building an app for android in phonegap and I have an issue with rotating divs with css. I have found a similar question here:
CSS rotation not applied in Android 4.0 webview

I have 2 android devices on which I can test my app. The first one is a Sony Xperia U with android 4.0.4. On this device the app works perfectly.

The other device is an HTC Desire with android 2.3.5. This device has a problem with the css rotation. When the page loads, the image is rotated correclty but immediately turns back to "normal".

The css rule I'm using is - webkit-transform:rotate(90); on a normal div. Could this be a problem with the android version of the system?

I can't get a hold of the problem here, the rotation seems to work on the second device, but only for a second or so.

Any suggestions would be appreciated :).

Answer 1

Android 2.x seems to support CSS3 transforms with the -webkit- prefix, but there's a catch.

This bizarre error comes from a custom set viewport. If you provide a custom viewport for iOS and Android, you must set user-scalable=yes. If user-scalable is set to no, this error appears.

For example:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes">

will work correctly, but something like

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

will display incorrectly

Answer 2

[Updated]

To prevent your div to turn back to its original state, try to add -webkit-animation-fill-mode: forwards; to your div's css :

#yourDiv {
  -webkit-animation-fill-mode: forwards; /* Set the last frame as persistent */
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1s;        /* Set the duration as you wish */
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
  }
}

If this doesn't work, try to add the final state to #yourDiv -webkit-transform: rotate(90deg);.

If it still doesn't work, you could use some JS to add a class to your div at the end of your animation to fix the final state.