other - html para chrome

Chrome desplazamiento lento con elementos de posición fija

Question

En mi tengo un DIV fijo en la parte superior, 3 pestañas fijas y un div fijo en la parte inferior (esto solo se mostrará cuando inicie sesión, en el futuro).

Estoy obteniendo un pobre rendimiento de desplazamiento solo en Chrome: FF e IE están bien.

Tengo listos algunos informes de problemas sobre Chrome, posicionamiento fijo y desplazamiento y quería ver si alguien tenía alguna sugerencia. Realmente me gustaría arreglar estos elementos en sus ubicaciones, pero también me gustaría tener un buen rendimiento de desplazamiento en Chrome.

¿Alguna idea sobre una solución?

Nota: es mucho más notable cuando se amplía en cromo ...

Actualización: he leído que otras personas tienen problemas similares y actualicé este problema de Chrome , que luego se fusionó en 136555 , supuestamente corregido desde Chrome 26.

Answer 1

Problema y como monitorearlo

El motivo de esto es que Chrome, por algunos motivos, decide que debe volver a codificar y cambiar el tamaño de las imágenes cuando un panel fijo lo revisa. Puedes ver esto particularmente bien con

► Haga clic derecho ➔ Inspeccionar ➔ Línea de tiempo ➔ Golpear ⏺ Grabar

► Regrese a la página y arrastre la barra de desplazamiento hacia arriba y hacia abajo (el desplazamiento de la rueda del mouse no es tan efectivo)

Editar (01/09/2016): desde que publicó esto, Chrome agregó nuevas funciones para ayudar a monitorear esto:

► Haga clic con el botón derecho ➔ Inspeccionar ➔ Representación (fichas inferiores)

➔ ☑ Problemas de rendimiento de desplazamiento
➔ ☑ Pintura intermitente
➔ ☑ Medidor FPS (menos importante, pero puede ser útil)

Esto le ayudará a identificar exactamente qué elementos requieren que se vuelvan a pintar en los pergaminos y resaltarlos claramente en la pantalla.

Esto parece ser solo un problema con el método que usa Chrome para determinar si es necesario volver a pintar un elemento inferior.

Para empeorar las cosas, ni siquiera puedes position:fixed el problema creando un div por encima de un div desplazable para evitar el uso de la position:fixed atributo position:fixed . Esto realmente causará el mismo efecto. Chrome dice que si algo de la página tiene que dibujarse sobre una imagen (incluso en un iframe, div o lo que sea), vuelva a pintar esa imagen. Entonces, a pesar de qué div / frame estés desplazando, el problema persiste.

.

La solución Easy Hack

Pero sí encontré un truco para solucionar este problema que parece tener pocos inconvenientes.

Añadiendo lo siguiente a los elementos fijos

/* Edit (9/1/2016): Seems translate3d works better than translatez(0) on some devices */
-webkit-transform: translate3d(0, 0, 0);

Algunos navegadores pueden requerir esto para evitar el parpadeo

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Esto coloca al elemento fijo en su propia capa de composición y obliga al navegador a utilizar la aceleración de GPU.

EDIT: un problema potencial me fue señalado por albb ; cuando se usa la transform , todas las position:fixed descendientes position:fixed elementos position:fixed se fijarán en esa capa de composición en lugar de toda la página.

.

Solución alternativa

Alternativamente, simplemente puede ocultar la navegación superior mientras se desplaza y volver a introducirla después. Puedes hacerlo así en jQuery:

//#network-bar refers to the fixed panel. This example works on TheVerge.com
//Note also that jQuery() can be replaced with $() in most instances.
var isHidden = false;
function topNavScroll() {
$(window).scroll(function() {
if(!isHidden){
//Animate off the screen while scrolling
$(''#network-bar'').animate({
top: ''-35px''
}, 250, function() {
//Make hidden to disable re-rendering
$(''#network-bar'')[0].style.visibility = "hidden";});
isHidden = true;
}
clearTimeout($.data(this, ''scrollTimer''));
$.data(this, ''scrollTimer'', setTimeout(function() {
//Animate back on the screen when finished scrolling and make visible
$(''#network-bar'')[0].style.visibility = "visible";
$(''#network-bar'').animate({
top: ''0px''
}, 250, function() {});
isHidden = false;
}, 1500));
});
}

Answer 2

Añade esta regla a tu elemento fijo,

will-change: transform;

Lea acerca de la solución de Here ,
y lea acerca de la propiedad de cambio de Here .

Answer 3

Hay un informe de error reciente sobre este problema particularmente molesto: http://code.google.com/p/chromium/issues/detail?id=155313

Tiene que ver con la combinación de elementos flotantes e imágenes grandes. Sigue siendo un problema en Chrome Canary 24.0.1310.0.

Answer 4

Hay varias maneras de acelerar este extremo frontal. Pruebe el complemento de Chrome de PageSpeed ​​Insights para obtener algunas ideas. Personalmente, recomiendo reconstruir este extremo delantero con el mismo diseño en la parte superior de un marco como el Bootstrap de Twitter , pero si desea algunos detalles en este extremo frontal:

• Como dice, el posicionamiento de la barra de encabezado es el que más tiempo produce en términos de representación de CSS ( resultados de pruebas de estrés de CSS ). Deshágase de esa imagen grande que está allí y reemplácela con una imagen de fondo de 1px de ancho. También está cambiando el tamaño de las imágenes como su logotipo (y cualquier otra imagen en este encabezado) innecesariamente, reemplace con versiones de tamaño real
• Puede guardar una gran cantidad de bytes transferidos optimizing todas sus imágenes de contenido

Answer 5

La primera solución de @Corylulu funciona, pero no completamente (todavía es un poco tartamudeo, pero mucho menos). También tuve que agregar -webkit-backface-visibility: hidden; Al elemento fijo para estar libre de tartamudeo.

Así que para mí, lo siguiente funcionó como un amuleto para evitar el tartamudeo en cromo cuando se usan elementos fijos en la página:

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

Edición: Webkit-transform y webkit-backface-visible, ambos generan fuentes e imágenes borrosas. Así que asegúrate de aplicar solo ambos en el estado flotante.