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 c

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.

Answer 2

Some main issues to look into. Browser size. Is it wider at one point than the other?

It's obviously within the same browser but just in case, I would test this in multiple browsers, because you do want your code to be cross compatible.

To me it looks like a width problem.

Perhaps you have a #login div, or some oddly named, at the top right that contains that content and floats it, and being that the content is not responsive, but the div itself is. When the div shrinks a little the content itself doesn't and pushes the rest of the content down.