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

Question

I have an HTML page that loads one way the first time you load it and another way the second time. This is reproducible using Chrome in private mode (because it clears the cache each time).

FIRST TIME:

SECOND (AND LATER) TIME:

I haven't seen a problem like this before, and am having trouble searching other complaints on this. Any advice on where to start investigating?

EDITS

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

Answer 1

Ok - the issue depends on multiple things

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

So while running Chrome in Incognito Mode and reloading again and again eventually I could reproduce the issue.

You cannot easily fix the loading race condition but fixing your css should work :

1. add class pull-left to your logo
2. clear the floated area by applying class clearfix to the page-header
3. Its not necessary but good choice, add width & height to your logo image so it doesn't pop in once loaded

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 that helped.