Chrome cambia de estilo después de actualizar y lo corrige cuando hago clic derecho para inspeccionarlo

Es un error bastante extraño, al menos en mi experiencia.

He hecho una versión de prueba del sitio para que puedas verlo en vivo. aquí.

Pasos para reproducir:

Entra al sitio, ya ves #thelist tan bien como debería:

enter image description here

El problema surge cuando haces una actualización simple, estoy en una máquina con Windows, así que Ctrl+R or F5.

Actualmente #thelist irá a cambiar su posición:

enter image description here

Mi principal problema para solucionar esto es que cuando trato de inspeccionar el elemento, vuelve a su posición correcta...

Tenga en cuenta también que si realiza una actualización completa Ctrl+cambio+R or Ctrl+F5 entonces el elemento volverá a su posición correcta.

¿Cómo es esto posible, qué está causando esto? ¿Cómo se puede solucionar?

preguntado el 22 de mayo de 12 a las 21:05

¡Lindo! Inspeccione el elemento y luego (con la ventana de inspección abierta) realice la actualización. Podrás depurar ese problema. Supongo que es por la posición absoluta, pero... ¡efecto lindo! -

Buen truco de @Adriano, en realidad no ayudó para este problema específico, ¡pero es útil de todos modos! -

2 Respuestas

On #imgSlot, establezca las dimensiones en el HTML:

<img id="imgSlot" src="img/slot.png" width="322" height="147">

y el problema ya no pasa.

Tu código original: http://jsbin.com/efejay

Con dimensiones: http://jsbin.com/efejay/2

Esto es claramente un error de WebKit. Creo que está relacionado con la imagen que se almacena en caché. He visto cosas similares en el pasado, pero JavaScript suele estar involucrado. Por ejemplo: jQuery height () devolviendo valores falsos

contestado el 23 de mayo de 17 a las 12:05

¡Maldita sea, nunca hubiera encontrado eso! Entonces, solo para ver si entendí correctamente, ¿fuerzas una actualización de la configuración de la imagen, su alto y ancho y obligas a que el diseño se establezca en su posición? - Trufa

Con la comprensión limitada que tengo de este error, es como si WebKit decidiera dónde colocar los elementos "demasiado pronto", antes de determinar la altura de las imágenes. Su problema puede solucionarse configurando el img altura, o por posicionamiento #thelist de una manera que no depende de la altura de la img ser conocido (como lo sugiere tbleckert). - treinta y dos

Creo que nunca debe establecer ancho y alto en la etiqueta img. Sé por qué quieres hacer esto, pero si hay una opción, úsala. - tbleckert

@tbleckert: Estoy de acuerdo en que en este caso, debería ser un background-image. Buena llamada. Sin embargo, si está diciendo "nunca debe establecer el ancho y el alto en la etiqueta img", será mejor que tenga algunas fuentes para citar. Ninguna de tus razones es convincente. Esto es lo que piensa Google: developers.google.com/speed/docs/best-practices/… - treinta y dos

Hm ok eso tiene sentido... pero todavía no creo que sea necesario. Gracias por el enlace y retiro mi declaración ;) - tbleckert

Trata posición: relativa on #columna derecha y coloque el elemento con parte superior y izquierda en lugar de margen

contestado el 22 de mayo de 12 a las 21:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.