1

I've a very strange bug in webkit (and blink) based browsers. All other browsers are fine.

I've several images with an inline-block display type and a width specified so they stack side-by-side in a grid. However sometimes webkit browsers will place them vertically. Inspecting the element shows the correct width, but the overlay shows it spanning the entire width of the container.

The CSS panel is Chrome says the image has a display type of block. I added an !important inline-block style attribute to the img tags but they would still sometimes be block - but there is no code anywhere telling them to have this display type.

I'm also unable to change the value using the developer tools. If I type in another value the display type can't be changed. The only way I found to fix it is to fire a JavaScript event once the images are downloaded to set the display value back to inline-block.

If the images have been cached then they will always display correctly.

The behaviour is rarely the same and points at a rendering bug in Webkit. Has anyone had this problem before and found a more elegant fix than my JS one?

The HTML is basic, but some style attributes are injected by JS, however removing this code didn't make any different.

<img src="image.jpg" id="image1"><img src="image.jpg" id="image2"><img src="image.jpg" id="image3"><img src="image.jpg" id="image4">...

The images are being pulled from a third party server and as it works when they are cached maybe it's a latency issue with the browser unable to read what it needs to quickly enough?

Error in display

box model details

2
  • I dont think inline-block is cross browser compatible. Try block and use float:left
    – wingyip
    Aug 27, 2013 at 10:57
  • @wingyip it's well supported (caniuse.com/#search=inline-block) and the page renders correctly when the images are cached
    – Ric
    Aug 27, 2013 at 11:18

1 Answer 1

0

If the images have been cached then they will always display correctly.

  • Make sure the width of the container is less than 100%
  • Make sure the position and float properties are not set
  • Make sure the important value is syntactically correct:

            display: inline-block !important;
    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.