Fixed position overrides transform in Android

Problem

I've got a fixed element with a 3dtransform() and it seems Android 2.2 ignores the transform unless I remove the fixed positioning. In the example below #myelement sticks to the top edge and isn't 100px down

#myelement {
  width:50px;
  height:50px;
  position:fixed;
  top:0;
  left:0;
  -webkit-transform: translate(100px,0);
  transform: translate(100px,0);
}

Any thoughts?

Problem courtesy of: htmlr

Solution

Ok after much trial and error seems like I've it working with translate() (instead of 3dtranslate) in Android 2.2 & 4.1 and Windows Phone 7 & 7.5

#myelement { 
  width:80%;
  height:100%; 
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  -webkit-transform:translate(-90%,0);
  -ms-transform:translate(-90%,0);/* Windows Phone 7 */
  transform:translate(-90%,0);
  backface-visibility:hidden;
  -webkit-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  background:green;

}
Solution courtesy of: htmlr

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.