Chrome changes style after refresh and corrects it when I right click to inspect it

Question

The is a pretty weird bug at least in my experience.

I have made a test version of the site so you can see it live here.

Steps to reproduce:

Enter the site, yo see #thelist just fine as it should:

The problem comes when when you do a simple refresh I'm on a windows machine so Ctrl+R or F5.

Now #thelist will go change it's position:

My main problem with fixing this is that when I try to inspect the element, it goes right back to it's correct position...

Note also that if you do a hard refresh Ctrl+Shift+R or Ctrl+F5 then the element will go back to it's correct position.

How is this possible, what is causing this? How can it be solved?

Answer 1

On #imgSlot, set the dimensions in the HTML:

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

and the problem no longer happens.

Your original code: http://jsbin.com/efejay

With dimensions: http://jsbin.com/efejay/2

This is clearly a WebKit bug. I think it's related to the image being cached. I've seen similar things in the past, but JavaScript is usually involved. For example: jQuery height() returning false values