在Firefox中的框阴影 [英] Box Shadow in Firefox

问题描述

我在Firefox中的 box-shadow 有问题 - lags：

CSS：

  -moz-box-shadow：0 0 5px＃333; 
 -webkit-box-shadow：0 0 5px＃333; 
 box-shadow：0 0 5px＃333; 
 

在Chrome中，它工作正常（没有滞后），但在Firefox中它很慢。 p>



如何解决这个问题？

解决方案

在Firefox多年。 Box-shadow可能导致缓慢滚动，或者当您为分配了box-shadow的元素设置动画时，Firefox可以抓取。解决方法是将模糊范围限制为10像素或从Firefox中过滤出框阴影：

  .fubar {
 box-shadow：10px 10px 30px＃000; 
 -moz-box-shadow：none！important; 
} 
 
 @ -moz-document url-prefix（）{
 .fubar {
 box-shadow：none; 
} 
} 
  




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?

解决方案

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

这篇关于在Firefox中的框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！