Image turns off when resized in Firefox

Question

I am currently working on a site. I noticed that some elements are disabled when viewed in Firefox. I attached the image showing the problem.

Below is a screenshot of the jsfiddle from Firefox.

Code playback is here: JSFIDDLE

This is just an image with a percantage value set using CSS.

.image-percent { width: 30%; } 

Strange, sometimes I can reproduce the error, and sometimes it just disappears after adding random HTML elements or other CSS properties.

Does anyone already experience this behavior or know a workaround forcing Firefox to properly resize the image?

Answer 1

Actually found a solution in this thread Firefox blurs the image when scaling through external CSS or inline style.

Firefox implements the custom property css image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Playing with different values, this solution gives a more or less suitable result:

 image-rendering:optimizeQuality; 

http://jsfiddle.net/jGKkB/

Answer 2

You need to add the max-width property. this should fix it.

 .image-percent { width: 30%; max-width: 100%; } 

Just for testing. try the following:

 .image-percent { max-width: 100%; height: auto; width: auto; } 

Hope that it is.

Answer 3

Basically, the image resolution is very large and you are trying to display it with a width of 30%. Therefore, your image pixels are not displayed correctly. Whenever you display a large image on a small or small image on a large, this will happen.

You can create another image with the required width.