CODEWITHSUNDEEP
firefoximagecss
Devin
Devin

Reputation: 2246

Image Pixelated When Box Shadow Applied in Firefox Only

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.sstatic.net/x0rku.jpg

enter image description here https://i.sstatic.net/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);

Upvotes: 2

Views: 463

Answers (2)

Devin
Devin

Reputation: 2246

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.

Upvotes: 1

keeg
keeg

Reputation: 3978

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

Upvotes: 1

Related Questions