Android 2.3 Browser non è in grado di eseguire rendering di alcune trasformazioni CSS3

Question

Ho problemi a far funzionare le Trasformazioni 2D di CSS3 in Android 2.3 con qualsiasi browser che utilizza il motore di Webkit predefinito (ad esempio browser predefinito, Dolphin HD, browser Amazon Kindle Fire Silk, eccetera). Il motore del webkit di Android 2.3 supporta le trasformazioni 2D e sono riuscito a ottenere alcuni siti con trasformazioni 2D per renderlo correttamente, ma non il mio sito!

Qualcuno conosce un problema in Android 2.3 che potrebbe causare un conflitto con le trasformazioni 2D? In alternativa, c'è un buon modo per indirizzare semplicemente css per i browser che utilizzano il motore di rendering del webkit Android 2.3? Mentre sto usando Modernizr, in questo contesto non funziona perché i browser Android 2.3 sono positivi per le trasformazioni 2D.

Ecco il mio sito: http://StevenGerner.com. Nella prima pagina, sto ruotando due elementi: 90deg (il titolo del sito e un elemento h2) e nessuno dei due ruoterà sui browser Android 2.3. Ho anche provato altre trasformazioni CSS, ma nulla sembra trasformarsi. Se spoglio l'intera pagina fino alla base, la trasformata funziona perfettamente, quindi probabilmente c'è qualche altro conflitto sul mio sito, non riesco a capire cosa! Ecco il codice CSS specifico per le trasformazioni:

//Applied to the h2 element which says 'howdy' at the top of the page 
    #about-front h2 { 
     display: inline-block; 
     float: left; 
     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9; 
     -webkit-transform: rotate(-90deg); 
     -webkit-transform-origin: 170% 170%; 
     -moz-transform: rotate(-90deg); 
     -moz-transform-origin: 170% 170%; 
     -ms-transform: rotate(-90deg); 
     -ms-transform-origin: 170% 170%; 
     -o-transform: rotate(-90deg); 
     -o-transform-origin: 170% 170%; 
     transform: rotate(-90deg); 
     transform-origin: 170% 170%; 
     width: 1em; 
     text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 -1px #777; 
    } 

//Applied to the site title with a media query between 500px and 750px 
    div#site_name { 
     display: block; 
     line-height: 0.85em; 
     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9; 
     -webkit-transform: rotate(-90deg); 
     -webkit-transform-origin: 160% 130%; 
     -moz-transform: rotate(-90deg); 
     -moz-transform-origin: 160% 130%; 
     -ms-transform: rotate(-90deg); 
     -ms-transform-origin: 160% 130%; 
     -o-transform: rotate(-90deg); 
     -ms-transform-origin: 160% 130%; 
     transform: rotate(-90deg); 
     transform-origin: 160% 130%; 
} 

Il problema può riguardare anche Android 2.2; tuttavia, al momento non ho dispositivi 2.2 da testare.

Apprezzerei molto qualsiasi pensiero, suggerimento e consiglio! Questo mi sta facendo impazzire!

Answer 1

Note

Internet Explorer 5.5 o versione successiva supporta una matrice filtro proprietaria che può essere usato per ottenere un effetto simile.

Gecko 14.0 ha rimosso il supporto sperimentale per skew(), ma è stato reintrodotto in Gecko 15.0 per motivi di compatibilità. Siccome è non standard e sarà probabilmente rimosso in futuro, non usarlo.

Android 2.3 ha un bug in cui i moduli di input "salteranno" durante la digitazione, se qualsiasi contenitore div ha un -webkit-transform.

fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

più: https://code.google.com/p/android/issues/detail?id=12451