¿Probar si se ha habilitado la aceleración de hardware para una animación CSS?

Question

¿Probar si se ha habilitado la aceleración de hardware para una animación CSS?

¿Cómo puedo saber (para fines de prueba) si la aceleración de hardware se ha habilitado para una animación CSS?

Tengo el siguiente código que esencialmente amplía un elemento y lo hace a pantalla completa (sin usar la API de pantalla completa HTML5). Se ejecuta como una tortuga asmática tartamudeando en la mayoría de los móviles cuando se usa una animación jQuery, así que he utilizado CSS3 en su lugar.

Aquí está el ejemplo de jsFiddle:

$("#makeFullscreen").on("click", function() {        
			
    var map = $("#map"),
        mapTop = map.offset().top,
        mapLeft = map.offset().left;
    
    $("#map").css({
        "position": "fixed",
        "top": mapTop,
        "left": mapLeft,
        "width": map.outerWidth(true),
        "height": map.outerHeight(true)
    });
    
    setTimeout(function(){map.addClass("fullscreen")},1);
    
    return false;        
});

.mapContainer {    
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.map {  
    background: #00f;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.fullscreen {
    -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    top: 0 !important;
    left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

#makeFullscreen {
    margin-top: 20px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
    <div id="map" class="map">
        <button id="makeFullscreen">Make Fullscreen</button> 
    </div>
</div>

Esto añade una clase y el elemento pasa de un estado al siguiente mediante una transición CSS. Esto es más rápido que jQuery, pero sigue tartamudeando en iOS y Android.

Pero leí aquí que puedes forzar la transición a ser acelerada usando la GPU especificando una transformación 3d que esencialmente no hace nada, como esto:

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

Sin embargo, después de agregar eso a mi CSS no veo ninguna mejora visual.

La Pregunta Entonces...

¿Hay una manera de ver si la aceleración de hardware se ha habilitado a través de herramientas de desarrollo en cualquier navegador? No necesito detectar esto con script, solo quiero saber con fines de prueba.

25

css jquery css3 css-animations hardware-acceleration

Author: Chris Spittles, 2014-10-14

Source

1 answers

score 69 · Accepted Answer

Descripción general

Una transición de propiedad CSS en un elemento es acelerada por hardware si se cumplen todas estas condiciones:

La composición de capas acelerada por hardware está habilitada en el navegador
La propiedad CSS en transición es acelerable
Al elemento se le ha dado su propia capa de composición

Generalmente, los requisitos para estas condiciones son:

Deben habilitarse las opciones de aceleración por hardware pertinentes, y los controladores de GPU y gráficos del dispositivo no deben estar en la lista negra
Solo composición de propiedades CSS (opacity, transform: translate / scale / rotate, etc) son acelerables
Cada navegador tiene razones específicas para decidir si dar a un elemento su propia capa de composición (o puede ser forzado mediante el uso de un "ir más rápido" hack como transform: translate3d)

Composición de capas acelerada por hardware

Para identificar si esto está habilitado:

Chrome

1. General aceleración

Ir a chrome://settings
Haga clic en el botón + Mostrar configuración avanzada
En la sección System, inspeccione el estado de la casilla Use la aceleración de hardware cuando esté disponible

Si la aceleración está habilitada, entonces:

2. Composición acelerada

Ir a chrome://gpu
En la sección Estado de la característica gráfica, inspeccione el valor de Composición. Esto será uno de los siguientes:
- Acelerado por hardware
- Solo software, aceleración de hardware no disponible

Más detalles sobre el Compositor de Software de la docs :

En algunas situaciones la composición de hardware es inviable, por ejemplo, si los gráficos del dispositivo los controladores están en la lista negra o el dispositivo carece completamente de una GPU. Para estas situaciones es una implementación alternativa al renderizador GL llamado el SoftwareRenderer

(Nota: Chrome también tiene un Ruta de renderizado de Software heredado, que es "todavía persistente a partir de mayo 2014, pero pronto se eliminará por completo en un Abrir y cerrar de ojos.")

Aquí hay un gran artículo con más información: Representación acelerada en Chrome.

Firefox

1. Aceleración general

Ir a las preferencias de Firefox
Vaya a la pestaña Avanzado
Ir a la General subab
Inspeccionar el estado de la Usar aceleración de hardware cuando esté disponible casilla de verificación

Si la aceleración está habilitada, entonces:

2. Aceleración de capa

Ir a about:config
Buscar layers.acceleration.disabled

Si la aceleración de capa está habilitada (si el valor es false), entonces:

3. Windows acelerado por GPU

Ir a about:support
En la sección Gráficos, inspeccione el valor de la GPU Windows acelerado

Si no comienza con 0/, y se muestra una API de renderizado (eg. OpenGL, Direct3D), entonces la aceleración de GPU está activa.

Safari

Habilite el menú de depuración de Safari ejecutando este comando en el Terminal:
defaults write com.apple.Safari IncludeInternalDebugMenu 1
Abrir (o reiniciar) Safari
En el menú de Safari Debug, inspeccione el estado de la opción Disable Accelerated Compositing en las banderas Drawing/Compositing submenú

Propiedades CSS acelerables

Las únicas transiciones de propiedades CSS que pueden ser aceleradas por hardware son aquellas que ocurren en la etapa de composición del proceso de renderizado. Por ejemplo:

opacity
transform: translate y sus amigos: translateX, translateY, translateZ, translate3d
transform: scale y sus amigos: scaleX, scaleY, scaleZ, scale3d
transform: rotate y sus amigos: rotateX, rotateY, rotateZ, rotate3d

Para beneficiarse plenamente de la aceleración, no se debe hacer la transición de propiedades no compuestas. Por ejemplo:

Una transición en solo transform: translate puede recibir el beneficio completo de la aceleración (porque la capa del elemento puede simplemente recomponerse por el GPU).
Una transición en transform: translate y width recibirá casi ningún beneficio de la aceleración (porque una transición en width hace que la capa del elemento sea repintada por la CPU para cada fotograma de animación).

Capas de composición y bordes de color

El motor de renderizado del navegador decide (basado en las preferencias del usuario, estilos CSS, etc.) si dar o no a un elemento su propia capa de composición.

Por ejemplo, Chrome tiene esta lista de razones, y también tiene esta opción en chrome://flags:

Composición para renderizadores con transiciones
Activar esta opción hará que los renderizadores con una transición en opacidad, transformación o filtro tengan su propia capa compuesta.

Si a un elemento no se le ha dado su propia capa, entonces no se acelerarán las transiciones CSS en ese elemento.

transform: translate3d (el hack de" ir más rápido " ) generalmente obliga a un elemento a dar su propia capa.

Pero incluso si a un elemento se le ha dado su propia capa, las transiciones en las propiedades de no composición(width, height, left, top, etc) todavía no se pueden acelerar, porque ocurren antes de la etapa de composición (eg. en las etapas de diseño o pintura). @Chrispittles Esta es la razón por la que no vio ninguna mejora visual después de agregar transform: translate3d.

La mayoría de los navegadores pueden mostrar bordes de color alrededor de capas compuestas, para que sean fáciles de identificar para el desarrollo / depuración:

Chrome

La visualización de los bordes de las capas compuestas se puede hacer de una de dos maneras:

Para todas las páginas - Vaya a chrome://flags y habilite Los bordes de la capa de renderizado compuesto ("Renderiza un borde alrededor de las capas de renderizado compuestas para ayudar a depurar y estudiar la composición de capas"). Tendrás que volver a iniciar Chrome para que esto surta efecto.
Para páginas individuales - Abra las Herramientas para desarrolladores, luego abra Cajón, seleccione la pestaña Renderizado y habilite Mostrar bordes de capa compuestos. Ahora, abrir las Herramientas para desarrolladores en cualquier página hará que los bordes de las capas se muestren en esa página.

Ahora activa la transición CSS en el elemento. Si tiene un borde de color, entonces tiene su propia capa de composición.

Los colores del borde y sus significados se definen en debug_colors.cc. Más detalles aquí y aquí.

Firefox

A dibuja los bordes de las capas compuestas:

Ir a about:config
Busca layers.draw-borders y habilítalo

Ahora activa la transición CSS en el elemento. Si tiene un borde de color, entonces tiene su propia capa de composición.

Los colores del borde y sus significados se definen en Compositor::DrawDiagnosticsInternal.

Safari

(Esto no funciona para mí con Safari 7.0.3, pero parece que funcionó para algunas personas tan recientemente como el pasado año.)

Inicie Safari desde el Terminal con el conjunto de variables de entorno booleanas CA_COLOR_OPAQUE:

$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

Método alternativo:

$ export CA_COLOR_OPAQUE=1 
$ /Applications/Safari.app/Contents/MacOS/Safari

Aparentemente, las capas aceleradas por hardware deben ser de color rojo. Más detalles aquí y aquí.

Actualización:

Aquí hay un método alternativo que funciona para mí en Safari 7.0.3 (crédito para David Calhoun):

En el menú de Depuración de Safari , enable Show Compositing Borders in the Drawing / Compositing Flags submenu

Ahora activa la transición CSS en el elemento. Si tiene un borde de color, entonces tiene su propia capa de composición.

Referencias

Para más detalles, echa un vistazo a estos excelentes artículos: