1. #1
    Sencha User
    Join Date
    Jun 2010
    Location
    India
    Posts
    17
    Vote Rating
    0
    ideamonk is on a distinguished road

      0  

    Default Webkit transform for panel contents not working in Android

    Webkit transform for panel contents not working in Android


    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 -
    HTML Code:
    <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 -

    Code:
    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>'
    	},
    });
    Code:
    @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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just a nonhelpful statement, Android sucks at CSS transforms. They are getting better..
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Location
    India
    Posts
    17
    Vote Rating
    0
    ideamonk is on a distinguished road

      0  

    Default


    True. Translate transforms work. Gracefully degraded my pizza in linear fashion for androids

    Hoping it works out when 2.0 is in final release.

Thread Participants: 1

Tags for this Thread