La página HTML se carga diferente la primera y la segunda vez (Google Chrome)

Tengo una página HTML que se carga de una manera la primera vez que la carga y de otra manera la segunda vez. Esto es reproducible usando Chrome en modo privado (porque borra el caché cada vez).

PRIMERA VEZ: enter image description here

SEGUNDA (Y POSTERIOR) VEZ: enter image description here

No he visto un problema como este antes, y tengo problemas para buscar otras quejas sobre esto. ¿Algún consejo sobre por dónde empezar a investigar?

EDICIONES

Gracias por todos los comentarios. Solo para aclarar algunas cosas. El CSS es solo Bootstrap 3.0 estándar, no hay otro estilo o CSS. la URL es https://www.acls.net/index-exp120.php y este es el modo privado de Chrome con todas las extensiones deshabilitadas. Solo veo este problema en Chrome, he actualizado el título para reflejarlo.

preguntado el 11 de septiembre de 13 a las 14:09

eso podría ser solo el navegador ... ¿has revisado tu css para esa parte del sitio? -

mencionaste la palabra más tarde, ¿hay algún CSS que no se cargue, posiblemente esté bloqueado por la carga de algún script? ¿Esto habría terminado de cargarse y se almacenaría en caché la segunda vez? -

¿Qué sucede si deshabilita el caché a través de la configuración de las herramientas de desarrollo de Chrome? ¿Ocurre esto en otros navegadores? -

¿Está utilizando listas de definiciones en su marcado por casualidad? Si es así, también me he encontrado con este problema antes. -

Lo siento, no se pudo reproducir ni siquiera en modo privado en ningún navegador. Compruebe que tal vez algún complemento intente interferir. -

2 Respuestas

Ok, el problema depende de varias cosas

  • solo podría suceder con un caché vacío
  • depende de la velocidad de carga de font-awesome y bootsrap, si se cargan más rápido que su logotipo o no...

Entonces, mientras ejecutaba Chrome en modo de incógnito y recargaba una y otra vez, finalmente pude reproducir el problema.

No puede arreglar fácilmente la condición de carrera de carga, pero arreglar su css debería funcionar:

  1. agregar clase pull-left a su logotipo
  2. borre el área flotante aplicando la clase clearfix al encabezado de página
  3. No es necesario pero es una buena elección, añade width & height a la imagen de su logotipo para que no aparezca una vez cargado

Así que aquí está:

<div class="page-header clearfix">
    <a href="/es/" class="logo pull-left"">
        <img src="images/logo.png" height="62" width="232" alt="">
    </a>

Espero que haya ayudado.

Respondido el 11 de Septiembre de 13 a las 15:09

Gracias, esto funcionó. Ahora estoy usando pull-left y clearfix en esta página. Envié la página rota al equipo de Google Chrome y la archivé en pastebin.com/Wj8YMgXc - Guillermo Entriken

Estaba teniendo un problema muy extraño que me llevó aquí donde solo la segunda vez que se cargó una página, se mostró correctamente en un Lumia 720. Al recargar la página o girar el teléfono celular, se mostró correctamente. Su respuesta me hizo buscar en Font Awesome de alguna manera en conflicto con Bootstrap. Seguramente, deshabilitar Font Awesome resolvió el problema. Luego moví el <link> importación de Font Awesome después de Bootstrap, que también resolvió el problema. ¿Sabes dónde puedo encontrar más información sobre la razón exacta detrás de esto? Me imagino que quizás el orden de carga de CSS importa. - steven jeuris

Algunas cuestiones principales a investigar. Tamaño del navegador. ¿Es más ancha en un punto que en el otro?

Obviamente, está dentro del mismo navegador, pero por si acaso, probaría esto en varios navegadores, porque desea que su código sea compatible.

A mí me parece un problema de ancho.

Tal vez tenga un div #login, o algún nombre extraño, en la parte superior derecha que contiene ese contenido y lo hace flotar, y dado que el contenido no responde, pero el div sí lo es. Cuando el div se reduce un poco, el contenido en sí mismo no lo hace y empuja el resto del contenido hacia abajo.

Respondido el 11 de Septiembre de 13 a las 14:09

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