CODEWITHSUNDEEP
htmlcssgoogle-chromeopencart
Simon
Simon

Reputation: 1733

Images not showing in Chrome until I click inspect element

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;
}

Upvotes: 4

Views: 10627

Answers (5)

Misha Reyzlin
Misha Reyzlin

Reputation: 13926

So, since opening the Web Inspector resizes the page in some cases, you should look into:

  • resize handlers on JavaScript side that might be causing your images to show up
  • media queries that satisfy certain width and only show images then on CSS side
  • Picture element having media queries that aren‘t covering the width you are viewing this with.

For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).

Upvotes: 0

Ryou Takeshi
Ryou Takeshi

Reputation: 11

Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.

Upvotes: 1

Satya Arya
Satya Arya

Reputation: 111

More scenarios to replicate this issue 1. Close inspect if not already opened. 2. Resize inspect if already opened. 3. Resize browser window.

Upvotes: 1

Mary
Mary

Reputation: 66

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

Upvotes: 5

Colton45
Colton45

Reputation: 270

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.

Upvotes: 2

Related Questions