2

So I have this very weird issue I have found. When I apply a box shadow to an image in Firefox, it turns pixelated. When viewed in Chrome, however, the issue is not present. Is this a known issue? My Google results have not yielded anything.

enter image description here https://i.stack.imgur.com/x0rku.jpg

enter image description here https://i.stack.imgur.com/Atfu9.jpg

CSS:

-webkit-box-shadow: 0px 0px 100px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 100px rgba(0,0,0,0.75);
box-shadow: 0px 0px 100px rgba(0,0,0,0.75);
1
  • Can you replicate it in a JSFiddle? Jan 3, 2013 at 16:05

2 Answers 2

1

Try applying

-moz-box-shadow in addition to the regular box-shadow

div.original.selected img{
    -moz-box-shadow: 0px 0px 100px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 100px rgba(0,0,0,0.75);
}
5
  • The CSS is as follows: -webkit-box-shadow: 0px 0px 100px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 100px rgba(0,0,0,0.75); box-shadow: 0px 0px 100px rgba(0,0,0,0.75);
    – Devin
    Jan 3, 2013 at 15:42
  • what if you put the image in a div, and applied the box shadow to it instead of the image?
    – keeg
    Jan 3, 2013 at 15:45
  • The image is zoomed with 3D CSS, so it puts the box shadow behind the zoomed image.
    – Devin
    Jan 3, 2013 at 15:48
  • Which I checked and the 3D CSS doesn't affect the pixelation.
    – Devin
    Jan 3, 2013 at 15:49
  • Yep. No shadow, image zooms fine with no pixelation. Add the shadow, it pixelates. With the inspector open, if I disable the CSS zoom, its still pixelated until I disable the shadow.
    – Devin
    Jan 3, 2013 at 16:05
1

Figured it out. It was the -moz-perspective: 600px; I had set. It caused the pixelation in Firefox, so I replaced it with -moz-transform: scale(2); instead and it fixed the issue. Just a small workaround and all is working fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.