PDA

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



ideamonk
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>' +
'</div>'
},
});




@mixin pizza-slice {
border: 1px dashed red;
width:75px;
height:103px;
float:left;
background-image: url("images/pizza-sprite.png");
}
.slices{
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?

Thanks

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

ideamonk
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.