All geek questions in one place

HTML page loads different first and second time (Google Chrome)

I have an HTML page that loads one way the first time it loads, and the other a second time. This can be reproduced using Chrome in private mode (since it clears the cache every time).

FIRST: enter image description here

SECOND (AND LATER) TIME: enter image description here

I had not seen such a problem before, and I had problems finding other complaints about it. Any tips on where to start the investigation?

edits

Thanks for the feedback. Just to clarify a few things. CSS is standard only for Bootstrap 3.0, no other style or CSS. The URL is https://www.acls.net/index-exp120.php , and this is Chrome's private mode with all extensions disabled. I see this problem only in Chrome, updated the title to reflect this.

+6
source share
2 answers

Good - the problem depends on a few things.

  • only possible with an empty cache
  • depends on the font loading speed - awesome and bootsrap - if they load faster than your logo or not ...

That way, while running Chrome in incognito mode and rebooting again and again, in the end, I could reproduce the problem.

You cannot easily fix the race condition at boot, but fixing your css should work:

  • add pull-left class to your logo
  • clear floating point area by applying clearfix class to page title
  • Not necessarily, but a good choice, add width and height to your logo so that it does not appear after loading.

So here it is:

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

Hope this helps.

+2
source

Some basic problems to study. The size of the browser. Is it wider at some point than another?

Obviously, in one browser, but just in case, I would test it in several browsers because you want your code to be cross-compatible.

To me, it looks like a width issue.

Perhaps you have a div #login or some strange named in the upper right corner that contains this content and floats it, and also that the content does not respond, but the div itself. When the div shrinks a bit, the content itself does not delete or release the rest of the content.

0
source

Source: https://habr.com/ru/post/953627/

More articles:


All Articles