2011-02-23 17 views
6

Tengo un problema con box-shadow en Firefox - it "desfases":Shadow Box en Firefox

Ésta es mi CSS:

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

En Chrome, funciona normalmente (sin el "retraso"), pero en Firefox es lento.

¿Cómo puedo solucionar esto?

+0

Chrome está optimizado para CSS3. ¿Has probado la versión beta de Firefox? – Shaz

+0

Se necesitan más detalles aquí. ¿A cuántos elementos está aplicando esto? ¿Qué versión de Firefox? ¿Podría hacer un ejemplo del problema en [jsFiddle] (http://jsfiddle.net/)? @Donut: Perdón, mal momento con las ediciones. – thirtydot

+0

ciertamente mi instalación de Mozilla 3.6.1.3 no tiene ningún problema con la representación de 'box-shadow' o, en realidad, con retraso. – Ross

Respuesta

7

Esto ha sido un error conocido en Firefox durante años. Box-shadow puede causar un desplazamiento lento o, cuando está animando un elemento al que se le asigna sombra de cuadro, Firefox puede rastrear. La solución es restringir el radio de desenfoque a 10px o filtrar el sombreado de Firefox:

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

@-moz-document url-prefix() { 
    .fubar { 
     box-shadow:none; 
    } 
} 
+1

Buena respuesta. ¿Tiene un enlace al error/solución/solución de problemas? – thepriebe

+0

'Esto ha sido un error conocido en Firefox durante años' siglos ahora –

+0

Por desgracia, mientras que el error todavía está presente en FireFox, woralround ya no funciona ya que FireFox dejó de admitir -moz-box-shadow ... –