5

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:

enter image description here

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:

enter image description here

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?

Trufa
  • 39,971
  • 43
  • 126
  • 190
  • Cute! Inspect the element and then (with the inspection window open) do the refresh. You'll be able to debug that issue. I guess it's because of the absolute position but...cute effect! – Adriano Repetti May 22 '12 at 20:23
  • @Adriano nice trick, it actually didn't help for this specific problem, but useful anyway! – Trufa May 22 '12 at 20:50

2 Answers2

4

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

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • God damn, I would have never ever found that!! so just to see if I understood correctly, you sort of force a refresh to the image setting it's height and width and force the layout to be set in position? – Trufa May 22 '12 at 20:43
  • With the limited understanding I have of this bug, it's like WebKit decides where to position elements "too soon", before it's figured out the height of images. Your problem can be worked around by either setting the `img` height, or by positioning `#thelist` in a way that doesn't rely on the height of the `img` being known (as suggested by tbleckert). – thirtydot May 22 '12 at 20:46
  • You should never set width and height on the img tag, I believe. I know why you want to do this, but if there is an option, use that. – tbleckert May 23 '12 at 07:44
  • @tbleckert: Where did you hear that? That sounds blatantly wrong. – thirtydot May 23 '12 at 08:58
  • What makes it sound wrong? The browser knows the size of the img, no reason for you yo set it. If the img is a part of the layout/design, it should be a background image in the css, not a img tag in html. Where did I hear it? From 7 years of experience as a front-end developer. Also there's is lots of people that has functions for removing the width and height of images generated by wordpress – tbleckert May 23 '12 at 09:08
  • And in this page, it should be in the css, not an img. – tbleckert May 23 '12 at 09:10
  • 1
    @tbleckert: I do agree that in *this case*, it should be a `background-image`. Good call. However, if you're saying "you should never set width and height on the img tag", you'd better have some sources to cite. None of your reasons are convincing. Here's what Google thinks: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions – thirtydot May 23 '12 at 09:24
  • 1
    Hm ok that makes sense..but I still don't think it's necessary. Thanks for the link and I take back my statement ;) – tbleckert May 23 '12 at 09:45
2

Try position: relative on #rightColumn and position the element with top and left instead of margin

tbleckert
  • 3,763
  • 4
  • 32
  • 39