7

I'm currently working on a website. I noticed some elements are beeing cut off, if viewed in Firefox. I attached an Image, showing the problem.

The image below is a jsfiddle Screenshot from Firefox.

cut off image

The code reproducing it is located here: JSFIDDLE

It's just an image, with an percantage value set with CSS.

.image-percent {
    width: 30%;
}

The weird thing is, sometimes I am able to reproduce the bug and sometimes it simply vanishes after adding random HTML-Elements or other CSS-Properties.

Anyone already experiences this behaviour or know a workaround, forcing Firefox to resize the image the right way?

Brian Webster
  • 30,033
  • 48
  • 152
  • 225
Kilian Stinson
  • 2,376
  • 28
  • 33
  • Is your image inside a div? if so. how wide is that div? – Kees Sonnema Jun 20 '13 at 08:41
  • No, as seen in the fiddle, it's only the ``. That's why I have no clue how to solve this. – Kilian Stinson Jun 20 '13 at 08:43
  • this could be related http://stackoverflow.com/questions/5918595/why-is-firefox-so-bad-at-resizing-images – claustrofob Jun 20 '13 at 08:50
  • This is not a CSS issue. It's the anti-aliasing after resizing the image. This happens in certain sizes when the percentage of resizing generates decimal amount of pixels. After all, browsers don't deal with decimal values because the minimum screen unit is 1 pixel. – otinanai Jun 20 '13 at 08:57
  • your image resolutions do not match the condition `width:30%` you give in css.. You can use [this plugin](http://github.com/Abban/jQuery-Picture).. This might help to make your image suitable to your condition `widht:30%` – Bhavik Jun 20 '13 at 09:01
  • Finally found this thread http://stackoverflow.com/questions/388492/firefox-blurs-an-image-when-scaled-through-css-or-inline-style Try to play with `image-rendering` property – claustrofob Jun 20 '13 at 09:06
  • 1
    Slightly rotating your image seems to resolve the anti-aliasing issue. See this fiddle: http://jsfiddle.net/cfpqK/2/ – otinanai Jun 20 '13 at 09:08
  • @claustrofob `image-rendering` `crisp-edges` seems to prevent the cut off, but the resized image looks really bad. – Kilian Stinson Jun 20 '13 at 09:17
  • @KilianStinson Try `image-rendering:optimizeQuality;` http://jsfiddle.net/jGKkB/ . Not ideal but much better then `crisp-edges` – claustrofob Jun 20 '13 at 09:19
  • @otinanai rotating doesn't help. @claustrofob Thanks! This worked. There is still `1px` cut off in my live example, but the rendering is much better than before. Post this as an answer an I will accept it. – Kilian Stinson Jun 20 '13 at 09:28

3 Answers3

16

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

Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Playing with different values this solution gives more or less appropriate result:

image-rendering:optimizeQuality;

http://jsfiddle.net/jGKkB/

Community
  • 1
  • 1
claustrofob
  • 5,448
  • 2
  • 19
  • 22
0

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

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

Just for testing. try this:

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

Hope that's it.

Kees Sonnema
  • 5,759
  • 6
  • 51
  • 106
  • No, the right side is still cut off. I guess it's a Firefox bug and I need to include some additional markup to get rid of this. I still hope there is a better solution. – Kilian Stinson Jun 20 '13 at 08:50
  • I want to resize the image, so setting `height` and `width` to `auto` won't work. – Kilian Stinson Jun 20 '13 at 08:54
0

Basically, your image resolution is very high and you are trying to display it in 30% width. So your image's pixels is not showing properly. Whenever you show the large image to small or small image to large this will be happened.

You can create an another image with desired width.

skparwal
  • 1,086
  • 6
  • 15