Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Box Shadow in Firefox

Tags:

css

I have a problem with box-shadow in Firefox - it "lags":

This is my CSS:

-moz-box-shadow : 0 0 5px #333;
-webkit-box-shadow : 0 0 5px #333;
box-shadow : 0 0 5px #333;

In Chrome, it works normally (without "lag"), but in Firefox it's slow.

How can I fix this?

like image 710
deche Avatar asked Feb 23 '11 18:02

deche


People also ask

Does the box shadow support all browsers?

The box-shadow property of CSS 3 is supported by recent versions of all browsers.

How do I shadow a text box?

Select the text or WordArt that you want to format. On the Format tab, under Text Styles, click Effects, point to Shadow, and then click the shadow style that you want.

What is box shadow in HTML?

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

How do you turn off box shadows?

If there is something with a shadow or border on your blog that you wish to get rid of, look for the element in the CSS section of your template. Find box-shadow or border property and change it the value to 0 or none .


1 Answers

This has been a known bug in Firefox for years. Box-shadow can cause slow scrolling or, when you are animating an element to which box-shadow is assigned, Firefox can crawl. The fix is to eiher restrict blur radius to 10px or filter out the box-shadow from Firefox:

.fubar {
    box-shadow: 10px 10px 30px #000;
    -moz-box-shadow:none !important;
}

@-moz-document url-prefix() {
    .fubar {
        box-shadow:none;
    }
}
like image 192
Al Sparber Avatar answered Sep 28 '22 12:09

Al Sparber