En Chrome DevTools, en virtud de la Representación, hay una opción para «Mostrar el potencial de desplazamiento cuellos de botella».

Cuando he activado esta opción, algunos div elementos que tengo en la pantalla con overflow:scroll mostrar una bandera en la parte superior diciendo «vuelve a dibujar en el libro.»

No puedo encontrar una gran cantidad de documentación acerca de esta característica, y no sé si es algo que realmente puede corregir o mejorar, o simplemente una declaración de un hecho – el div de contenido, y que de hecho desplazamiento.

InformationsquelleAutor user888734 | 2014-07-14

4 Comentarios

  1. 55

    Puede aplicar este CSS en el div con overflow: scroll o overflow: auto que crear de desplazamiento de los cuellos de botella.

    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    Que forzar al navegador a crear una nueva capa de pintura de este elemento, y a veces corrección de desplazamiento de los cuellos de botella (especialmente con Webkit).

    • Esto hace el trabajo. Debe ser marcado como respuesta.
    • Google ahora es compatible con el unprefixed translateZ
    • Creo que -webkit-backface-visibily: hidden debería funcionar así.
    • que no funciona así, sin embargo lo he escrito mal, y, idealmente, usted debe incluir todos los proveedores prefijos: -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    • Ah, tienes razón @Chris Barr. Yo suelo comprobar la ortografía de los mejores. El webkit prefijo podría ser una buena idea para versiones anteriores de navegadores. Para mozilla creo que podría no ser necesario que el navegador parece manejar vuelve a pintar de manera diferente, con grandes bloques de fixed posición, por ejemplo. Pero supongo que depende del caso exacto, que no es dado aquí.
    • transform: translateZ(0) es la manera antigua. will-change: transform es el nuevo camino, pero no tiene IE11/soporte en los bordes.
    • ¿Puede explicar qué te refieres cuando dices que el navegador va a crear una nueva capa de pintura de los elementos? Me gustaría entender por qué esto funciona
    • Hasta que todos los navegadores modernos pueden solucionar el problema con ‘cambiar’, esto debe continuar a ser conocido como la respuesta correcta
    • Hace este trabajo en cromo navegador? Me estoy enfrentando problemas con la rueda del ratón

  2. 22

    Aunque la aceptan respuesta resuelve el problema, es que vale la pena mirar el CSS cambiar de la propiedad. Este es preferido sobre transform: translateZ(0); en los últimos tiempos. Aquí hay un artículo que explica la diferencia en detalle – https://dev.opera.com/articles/css-will-change-property/

    .scroll-container {
      will-change: transform;
    }
    • Esta debe ser la mejor respuesta, porque no es un hack a diferencia de la de arriba.
    • Extrañamente, aunque, will-change: scroll-position parece no tener efecto.
    • Así que debo usar tanto para el soporte de los navegadores más antiguos?
    • esta revisión un extraño problema de rendimiento en nuestras páginas que tienen un área de desplazamiento
  3. 16

    Este asombroso que me tomó varios días para seguir la pista de lo que estaba pasando, y solo porque vi a un lado-comentario al final de un informe de error en
    Cromo bugtracker Problema 514303
    . Aquí es lo que está pasando y cómo solucionarlo:

    Existe un concepto llamado «LCD de texto», que creo que significa subpixel de suavizado de líneas, es decir, «más texto más nítido». Por desgracia, esta característica es mutuamente incompatibles con el compositor acelerado desplazamiento.

    LCD de texto está activado por defecto (al menos en Parpadeo/Webkit?) en todas las plataformas que no son de alta DPI (el más normal de los monitores; es decir, se puede comprobar console.log(devicePixelRatio)). Por otro lado, la pantalla LCD de texto está DESHABILITADA de forma predeterminada en alta resolución de los dispositivos (creo pantalla Retina, o la mayoría de los dispositivos móviles y tabletas) puesto que usted realmente no necesita un «cajón texto más nítido» en alta resolución de PPP plataformas.

    Por lo tanto, lo opuesto es cierto para el compositor acelerado desplazamiento: sólo es posible en alta resolución de PPP plataforma donde LCD de texto está deshabilitado.

    Sin embargo, puede forzar compositor acelerado el desplazamiento en la mayoría de los monitores mediante la promoción de la overflow:scroll elemento con su propia capa, añadiendo will-change:transform a ese elemento, o cualquier hackish equivalente a la que se fuerza el desbordamiento del elemento a ser el padre de su propia capa (como transform:translateZ(0)). (Tenga en cuenta que el proveedor prefijos están siendo eliminadas.)

    tl;dr: Chrome no suponga tanto subpixel el antialiasing Y el gpu-asistida de desplazamiento; escoger una o la otra. Subpixel antialiasing es el valor predeterminado de recogida en Chrome (excepto en los teléfonos móviles y pantallas de retina, porque su texto es tan pequeño que no necesita la función, de modo que no se dará cuenta de este problema en estas plataformas). Reemplazar esta forzando el elemento en su propio compositor Capa con will-change:transform (pero tenga en cuenta que tal vez su texto no tiene el aspecto de cristal perfecto).

  4. -6

    No, usted no puede modificar, es un Cromo de la función de permitir que usted sabe, lo que está pintado de cada actualización en la ventana.

    Actualizaciones puede ser un montón de cosas diferentes (desplazamiento, mousemove, intervalo, requestanimationframe,…).

    Pero, ahora que usted sabe que puede mejorar el código.

    Si (no sé), el navegador que siempre re-pintar un div si se establece el desbordamiento de desplazamiento que tal vez pueda hacer algo de JS para establecer overflow hidden cuando fuera de la pantalla…

    Este post hablar de diferentes diseño del Explorador

Dejar respuesta

Please enter your comment!
Please enter your name here