Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Forzar la interpretación de porcentaje de transformación CSS3 correcta en Android

Tl dr Obtenga el mecanismo demostrado en el siguiente enlace para comportarse con aceleración de GPU en Android Chrome y navegador predeterminado.

UPDATE 2 (2014-01-13 13: 25: 30Z): Según el comentario de bref.it , el comportamiento reportado se arregla como de Android 4.4 KitKat – pero la solución que he descrito a continuación lo rompe ahora! La ley de Sod.

  • El evento ListView onClick no se dispara con la dirección de correo electrónico Linkified
  • Emulador de Android no se inicia
  • ActivityUnitTestCase y startActivity con ActionBarActivity
  • Obj Fragmento incorrecto 2º tipo de argumento encontrado 'Android.support.V4.app.Fragment.' Requerido 'Android.app.Fragment'
  • J2ME VS Android VS iPhone VS Symbian VS Windows CE
  • Cómo POST JSON todo en bruto en el cuerpo de una solicitud de Retrofit?
  • UPDATE 1 (2012-11-01 17: 54: 09Z): El comportamiento de buggy es inferrable de la matriz de transformación según lo informado por el estilo calculado del elemento transformado, que devuelve un valor de píxel. Trataré de escribir una prueba Modernizr para que allane el camino para cualquier posible solución.

    He desarrollado un mecanismo para deslizar un contenedor para revelar la totalidad de ancho, horizontalmente dispuestos sub-secciones. Las pestañas deslizantes, básicamente. Debido a que hay un montón de cosas intensivas en rendimiento y elaborado Javascript, quiero mantener JS al mínimo y hacer tanto de lo puramente estilístico en CSS. Creo que lo he hecho bastante bien, teniendo en cuenta – JS sólo cambia un atributo en el envoltorio:

    (Con izquierda)

    Http://jsfiddle.net/barney/VPJuq/ (los dispositivos móviles pueden agregar / mostrar / a estas URL de violín para ver los resultados por sí mismos)

    Una palabra sobre cómo funciona esto: el tratamiento de las pestañas como inline-block s me permite especificar white-space: nowrap (el resto del código en el último par de reglas básicamente colapsa el espacio en blanco entre las pestañas) y permitir que se apilen horizontalmente Sin borrar / devolver, todo el tiempo manteniendo el ancho total de su padre. A partir de ahí, establecer un desplazamiento negativo a la izquierda de la envoltura hace la magia. Genial, ¿eh?

    Ahora, un poco de contexto: la interfaz que estoy desarrollando es para ser ejecutado en aplicaciones móviles nativas – la funcionalidad básica de la aplicación se basa en la tecnología de vanguardia móvil específica (no pregunte – NDA) – a través de un UIWebView, y el único Plataforma que actualmente soporta la tecnología en cuestión es Android.

    Aquí mi problema es doble: transform: translate funciona a / lot / smoother ( translate3d aún más) que las transiciones left o margin-left , a un punto que es realmente muy deseable, borderline crucial – especialmente en Android, viendo como no traducido Las transiciones siguen siendo tartamudos glacial en los últimos teléfonos con el último sistema operativo. Con esto en mente, el quid de la cuestión es que Android parece inferir el modelo de caja de manera diferente cuando se relaciona con la translate . Para demostrar, he aquí una versión basada en la transform de la misma cosa, que hace lo mismo que el violín anterior, y funciona en todos los navegadores que soportan translate3d …

    (Con traducción)

    Http://jsfiddle.net/barney/EJ7ve

    Si examinas esto en el iPhone (de nuevo, agregando /show ), notarás una velocidad de fotogramas mejorada en iPhones. Lo mismo ocurre con Firefox que se ejecuta en Android, y posiblemente en Chrome y el navegador predeterminado en Android, excepto que aquí, el desplazamiento translateX de -100% de alguna manera se refiere al espacio ocupado por las tres pestañas, por lo que el contenedor se desliza sólo lo suficiente Que ninguna de las pestañas son visibles. Esto es impar, ya que los porcentajes de transformación se especifican en relación con el modelo de caja completa del elemento que se está transformando – y el estilo computado describe inequívocamente el ancho de la envoltura como el mismo que su padre (no, como implica el resultado, Acomodar las pestañas).

    ¿Podemos describir esto como un error?

    Por lo que puedo decir, no hay puro-CSS (no soy aversión a la detección de la característica de la consulta de medios, bifurcación del vendedor CSS o piratería de propiedad) método de inferir y resolver este problema. De hecho, la única manera de hacer este mismo trabajo mecánico CSS que puedo pensar ahora es oler la cadena UA para Android y la aplicación de diferentes normas condicionales. ¡Yuk! Si voy a hacer una solución Android-WebKit-only y romper la funcionalidad en cualquier otro lugar, puedo tomar el comportamiento de facto en cuenta y hacer que los porcentajes se refieran a fracciones:

    (W / traducir – para la actualización de Android : innecesario y se rompe en Android 4.4 KitKat )

    Http://jsfiddle.net/barney/nFt5t/

    No es ideal, ya que esto hace que el navegador de la interfaz de usuario sea específico y requiere que conozcamos de antemano el número de pestañas de un grupo antes de escribir nuestro CSS. Pero esto ni siquiera resuelve por completo el problema, ya que, en el cambio de orientación (y esto es realmente raro), el desplazamiento cambia al comportamiento de especificación-correcto mostrado por otros navegadores!

    También he tratado de aplicar la traducción a las pestañas reales, que de nuevo funciona en todas partes, pero a pesar de recoger correctamente y la aplicación de las reglas, el navegador de Android no hará el efecto. Extraño y extraño:

    (W / traducir, trabajando en la teoría de Android, no trabajando en Android en absoluto)

    Http://jsfiddle.net/barney/EJ7ve/9

    Cualquier idea o idea para una solución multi-navegador muy apreciada.

  • La barra de estado de Android espera iconos de tamaño 25x25dp mientras que las pautas recomiendan 32x32dp. ¿Quién está equivocado?
  • Pantalla completa DialogFragment en Android
  • Uso del contexto en un fragmento
  • Android PhoneGap Plugin, UI tabbar, redimensionar WebView
  • No encontró la clase "android.support.v7.internal.widget.TintManager" en la ruta: DexPathList
  • Ir a la pantalla de inicio programáticamente
  • 3 Solutions collect form web for “Forzar la interpretación de porcentaje de transformación CSS3 correcta en Android”

    Estoy usando Android 2.3 y no puedo producir el problema exacto que describe (con respecto a su comentario "-100% de alguna manera se refiere al espacio ocupado por las tres pestañas" ). Sin embargo, estaba experimentando otros problemas resultando en transiciones intermitentes / saltitantes y alguna otra rareza que no investigue realmente.

    Por el bien de la conversación, vamos a suponer que el "envoltorio" es 500px de ancho.

    Usando su técnica inline-block / nowrap (que es una técnica de diseño muy poco apreciada de YUI), sus 3 paneles de la pestaña están ocupando 1500px de espacio horizontal. Sobre la base de lo que usted describe, es necesario parodiar el navegador en el pensamiento de todos los paneles de pestañas están tomando hasta 500px de espacio horizontal. Checkout mi violín, que esencialmente utiliza algunos márgenes negativos y se traduce a engañar al navegador de una manera que creo que debería funcionar, pero no puedo probarlo. De cualquier manera, mi ejemplo fijó la rareza que estaba experimentando en mi Android 2.3 – por lo que puede que desee utilizar de cualquier manera.

    http://jsfiddle.net/ryanwheale/EJ7ve/29/

    (Y el CSS pertinente)

     .tabs > * { width: 100%; margin-left: -100%; } .tabs > *:first-child { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .tabs > *:first-child + * { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .tabs > *:first-child + * + * { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } .tabs > *:first-child + * + * + * { -webkit-transform: translate3d(300%, 0, 0); -moz-transform: translate3d(300%, 0, 0); -ms-transform: translate3d(300%, 0, 0); -o-transform: translate3d(300%, 0, 0); transform: translate3d(300%, 0, 0); } 

    Nota: Traté de utilizar el posicionamiento relativo en lugar de las transformaciones anteriores, y seguía recibiendo la misma rareza que describí anteriormente.

    Yo estaba experimentando un problema similar.

    Para mí el problema era:

     * { box-sizing: border-box; } 

    Tenía la caja de la frontera aplicada a todos los elementos. Una vez que eliminé esto, el porcentaje de translate3d se aplicó correctamente.

    Si CSS no funciona (y debería estar funcionando), necesita una solución. Compruebe por favor mi versión modificada:

    http://jsfiddle.net/EG9v8/1/

     function makeCss(index){ // Calculate the offset, given the tabs size var size = -$('.tabs').width() * index; // Create style for the given offset. var css = '-webkit-transform: translate3d('+size+'px, 0, 0);'; css += '-moz-transform: translate3d('+size+'px, 0, 0);'; css += '-ms-transform: translate3d('+size+'px, 0, 0);'; css += '-o-transform: translate3d('+size+'px, 0, 0);'; css += 'transform: translate3d('+size+'px, 0, 0);'; return css; } $('.tabLinks a').on('click', function(e){ e.preventDefault(); var index = $(this).index(); // Set the current style $('.tabs').attr('style', makeCss(index)); }); 
    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.