View Full Version : Webkit transform for panel contents not working in Android

8 Dec 2011, 1:33 AM
I have a panel where I'm trying to create pizza slices arranged radially. The transforms works fine in Chrome, iPhone simulator 3,4 , but when I load the page on my HTC Desire HD (Android 2.3.5), the transforms don't appear.

I tested my phone's browser with other pages and a fresh html -

<div style="width:40px; height:60px; background:red; -webkit-transform: rotate(34deg);"></div>

This works on my browser. However, in my panel and css, the webkit-transforms don't appear at all on android -

Ext.define('App.ui.PizzaBox', {
extend: 'Ext.Panel',
xtype: 'pizzaBox',

config: {
height: 170,
padding: '20 0 0 0',
html: '<div class="slices">' +
'<div class="slice1"></div>' +
'<div class="slice2"></div>' +
'<div class="slice3"></div>' +
'<div class="slice4"></div>' +

@mixin pizza-slice {
border: 1px dashed red;
background-image: url("images/pizza-sprite.png");
width: 300px;
margin:0px auto;
.slice1 {
@include pizza-slice;
-webkit-transform: translate(0px, 0px) rotate(-45deg);
.slice2 {
@include pizza-slice;
.slice3 {
@include pizza-slice;
-webkit-transform: scaleX(-1) translate(0px, 0px);
.slice4 {
@include pizza-slice;
-webkit-transform: translate(0px, 0px) rotate(90deg) ;

What could be the issue here ? I notice that transforms are available since android 2.1. Is my style definition clashing or being over-riden on android?


9 Dec 2011, 10:26 AM
Just a nonhelpful statement, Android sucks at CSS transforms. They are getting better..

10 Dec 2011, 1:00 AM
True. Translate transforms work. Gracefully degraded my pizza in linear fashion for androids :))

Hoping it works out when 2.0 is in final release.