Skip to content Skip to sidebar Skip to footer
Home / Css / Google Chrome / Html / Opencart

Images Not Showing In Chrome Until I Click Inspect Element

Post a Comment
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 ha

Solution 1:

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


Solution 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.


Solution 3:

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


Solution 4:

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.


Solution 5:

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)">).


Post a Comment for "Images Not Showing In Chrome Until I Click Inspect Element"