html - source - Problema de redibujado de Chrome

view source chrome android

Question

Estoy obteniendo un extraño problema de redibujado en Chrome:

¿Ves el lado derecho roto? Este es un div con un solo fondo img .

HTML

<div id="resultsSortFilter>
  <!-- ... -->
</div>

CSS

#resultsSortFilter {
    float: left;
    width: 712px;
    height: 109px;
    margin: 7px 0 0 8px;
    background: url(''../images/search_sortfilter_bg.png'') no-repeat;
}

• No hay problemas en ningún otro navegador
• Sucede solo en las versiones más nuevas, bloqueamos la actualización para evitar que esto cause problemas internamente.
• Parece que se activa al desplazarse hacia arriba y hacia abajo antes de que termine la renderización.
• Los mismos problemas en sitios múltiples

¿Alguien más ha visto esto? ¿Alguien sabe qué lo está causando o qué piensa Chrome hacer al respecto?

Versión de Chrome 26.0.1410.64 m

Actualizar

El problema está en Windows y Mac OS. De hecho, parece peor en Mac.

Podría haberlo anclado más. Obtenemos el error en una página que contiene muchas imágenes grandes. Me pregunto si tiene que ver con el tamaño de los datos que Chrome tiene para descargar.

Esto parece hacer que el problema desaparezca (no lo llamaré una solución):

"Puede ser que a la versión más nueva de Chrome simplemente no le guste tu GPU. He tenido problemas similares a los tuyos y los he solucionado desactivando las funciones de composición y aceleración 3D.

Escriba chrome: // flags en la barra de direcciones y configure los siguientes elementos:

• Composición de GPU en todas las páginas: desactivado (tres opciones en un menú desplegable)
• Deshabilite el lienzo 2D acelerado: Habilite (haga clic en el enlace que dice ''Habilitar'', el cuadro se volverá blanco).
• Deshabilite las animaciones aceleradas de CSS: Habilite (como en el caso anterior, el elemento se pondrá blanco).
• Luego haga clic en el botón que aparece en la parte inferior de la página Reinicie ahora para reiniciar Chrome y pruebe si funcionó. "

Desde https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior

Actualizar

El problema parece desaparecer en las versiones posteriores de Chrome.

Answer 1

Chrome se está poniendo más cabreado. Algo que vale la pena probar es forzar la aceleración de hardware de GPU en el elemento.

Agregue esto al CSS para forzar la aceleración de hardware:

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

Answer 2

He tenido este tipo de problema al alternar display:none; display:block;

Por ejemplo, con jQuery.toggle()

El elemento en cuestión era solo una envoltura para el contenido que quería mostrar y ocultar. Entonces este es su padre que se expandiría o contraería verticalmente. Se vería así:

<div class="parent">
    <div class="child-to-toggle">
    </div>
</div>

Child-to-toggle no tenía reglas de estilo y, cuando estaba oculto, una parte del elemento principal no se redibujó correctamente. (la parte inferior)

Luego, agregué una regla css a la función niño a botón y el problema fue resuelto. Parece que agregar una regla css forzará algún redibujado en ese caso.

A pesar de la respuesta aceptada, la agrego porque habilitar la aceleración de hardware en mi computadora, Macbook pro, OSX Maverick, Chrome 36, arruinaría por completo la interfaz de usuario con artefactos, así que tuve que buscar otra forma.

Agregar una regla CSS puede ayudar. En mi caso agregué un borde superior a niño-a-alternar.

Answer 3

He tenido problemas con esto en los navegadores webkit, no solo en Chrome. Lo resolví colocando la siguiente regla en mi CSS:

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

Esto aplica la aceleración de hardware en todos los elementos, excepto para svgs en FF / IE / Safari / Chrome si es compatible.

No aplico la transformación en las etiquetas SVG ya que, por alguna razón, esto estaba causando que mi svgs no se procesara correctamente, extrañamente aplicar esto a los elementos como rect dentro de la etiqueta en sí no causa problemas.

Intente agregar esta regla a su CSS y vea si resuelve su problema.