Images not showing in Chrome until I click inspect element

Question

I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.

If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.

And here's the crazy part, if I click on inspect element, suddenly the image appears.

Some css code

.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}

Answer 1

In the CSS you need to set the width and height attributes.

Answer 2

That is weird. Regardless, things to check:

1. Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
2. Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
3. Disable JS - Javascript might be causing an issue here, try disabling it to check.
4. Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.

Let me know how this turns out.