El navegador Android 2.3 no procesa algunas transformaciones 2D CSS3

Question

Tengo problemas para hacer que las Transformadas 2D CSS3 funcionen en Android 2.3 con cualquier navegador que use el motor webkit predeterminado (por ejemplo, navegador predeterminado, Dolphin HD, navegador Amazon Kindle Fire Silk, etc.) El motor de Android 2.3 webkit admite transformaciones 2D y he podido obtener algunos sitios con transformaciones 2D para que se procesen correctamente, ¡pero no en mi sitio!

¿Alguien sabe algún problema en Android 2.3 que pueda causar un conflicto con las transformaciones 2D? Alternativamente, ¿hay una buena manera de apuntar css para navegadores usando el motor de renderizado Android 2.3 webkit? Mientras uso Modernizr, en este contexto no funciona porque los navegadores Android 2.3 dan positivo para transformaciones 2D.

Aquí está mi sitio: http://StevenGerner.com. En la página principal, estoy rotando dos elementos -90deg (el título del sitio y un elemento h2) y ninguno girará en los navegadores Android 2.3. Incluso he intentado otras transformaciones css, pero nada parece transformarse. Si elimino toda la página hasta lo básico, la transformación funciona sin problemas, por lo que probablemente haya algún otro conflicto en mi sitio, ¡simplemente no puedo entender qué! Aquí está el CSS específico para las transformaciones:

//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%; 
} 

El problema también se puede aplicar a Android 2.2; sin embargo, actualmente no tengo ningún dispositivo 2.2 para probar.

¡Realmente apreciaría cualquier pensamiento, sugerencia y consejo! ¡Esto me está volviendo loco!

Answer 1

Notas

Internet Explorer 5.5 o posterior es compatible con un filtro de matriz propietaria que se puede utilizar para lograr un efecto similar.

Gecko 14.0 eliminó el soporte experimental para skew(), pero fue reintroducido en Gecko 15.0 por razones de compatibilidad. Como es no estándar y es probable que se elimine en el futuro, no lo use.

Android 2.3 tiene un error donde los formularios de entrada "saltarán" al escribir, si cualquier contenedor div tiene una transformación -webkit.

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

más: https://code.google.com/p/android/issues/detail?id=12451