Pergamino de desplazamiento con propiedad de sombreado de caja CSS3?

Question

Agregué un box-shadow a una sección de una página recientemente para darle el mismo efecto de sombreado que se ve en las aplicaciones Mac OS X. Se veía genial, pero noté que desplazarse hacia arriba y hacia abajo en la página hacía que se quedara rezagado. Por lo general, solo veo esto en las páginas que tienen imágenes de fondo molestas y toneladas de imágenes y videos incrustados enyesados ​​por todas partes (Tos MySpace tos). Originalmente decidí usar Box-shadow ya que pensé que eliminaría la necesidad de usar una imagen, lo que eliminaría cualquier posibilidad de desplazamiento de desplazamiento.

Sé que CSS3 todavía es nuevo, pero ¿es este el motivo del retraso? ¿La sombra es software renderizado o algo así? Cuando aplico la sombra de la caja a elementos más pequeños, no se retrasa en absoluto. Me pregunto si alguien más ha experimentado esto.

yo sólo lo intentaron en la primera página de desbordamiento de pila, en la #content div usando Firebug con un ajuste de:

-moz-box-shadow: 1px 1px 10px; 

y lo hice notar un cierto retraso de desplazamiento después. Estoy usando Firefox 3.5.

Mi pregunta es, ¿cuáles son algunas alternativas al uso de este atributo si deseo agregar un borde de estilo Mac OS X a una sección de mi página?

En una nota al margen, ¿alguien sabe si es posible aplicar la sombra de la caja solo en los lados superior, izquierdo y derecho del elemento y no en la parte inferior? Intenté 1px -1px 10px pero todavía muestra la sombra en la parte inferior. Si continúo disminuyendo el segundo desplazamiento, eventualmente elimina la sombra del fondo, pero luego la sombra superior ahora es mucho más oscura y más grande.

Y sí, he visto los artículos en la caja-sombra en:

• CSS3 Info
• fredericiana's blog

Answer 1

Su mejor opción sería utilizar -moz-border-image lugar. Eso debería resolver ambos problemas.

E.g. usted podría utilizar una imagen como esta, http://i28.tinypic.com/2njzkt1.png, combinado con CSS como esto

-moz-border-image: url(shadow.png) 10/10px; 

para crear su sombra. Y como está usando una imagen, también puede dejar de lado la sombra inferior, si lo desea.

---

No vas a ser capaz de eliminar la sombra de la parte inferior con -moz-box-shadow; no se llama "sombra de caja" por nada. Aplica una sombra a toda la caja. No puede especificar una sombra para cada lado por separado, como con border, por ejemplo. Lo mejor que puedes hacer es juguetear con la ubicación, el desenfoque y la dispersión de la sombra. Pero eso inevitablemente lleva a una sombra más oscura en el lado opuesto.

Obtengo la sombra de la caja también cuando lo pruebo en Stackoverflow. También afecta el rendimiento en Safari cuando intento -webkit-box-shadow, aunque no es tan notable como en Firefox. El rendimiento se espera que mejore en el futuro, pero supongo que la sombra siempre tendrá algún impacto ya que, hasta donde yo sé, es software prestado.

Answer 2

Esto se ha solucionado en el kit web desde hace dos días. :)

https://bugs.webkit.org/show_bug.cgi?id=22102

Usted puede recoger un cromo noche para probarlo.

Miré en FF3.6 y FF4 y no veo el rendimiento de desplazamiento terrible allí, por lo que podría abordarse allí también.

Answer 3

#shadow { 
-moz-border-image: url(img.png) 10/10px; #Firefox under v15.0# 
-webkit-border-image: url(img.png) 10/10px; #Safari, Chrome under v15.0, Android & iOS# 
-o-border-image: url(img.png) 10/10px; #Opera under v15.0# 
border-image: url(img.png) 10/10px; #IE v11+, other new Browser# 
} 

Versión de navegador cruzada para navegador antiguo y nuevo. img simple: http://i28.tinypic.com/2njzkt1.png

estilo : fijado para las imágenes demasiado sobrecarga navegador perfomance de

Answer 4

El problema persiste en Chrome para Android a partir de la fecha actual. Algunos combos de caja y sombra producen un rendimiento de desplazamiento pobre. En mi caso, apilar dos sombras de caja insertadas (por ejemplo, arriba/abajo) conduce al problema descrito. La única solución que puedo proporcionar es hacer que las sombras de caja sean menos complejas y volver a intentar ... eso funcionó para mí. Eso no es satisfactorio, pero en su lugar también puede usar la solución de imagen de borde o eliminar por completo la sombra de cuadro afectada. Espero que esto se arregle pronto, finalmente. Por cierto, la versión Android de Firefox ya no tiene problemas (para mi css3). Además, las versiones de escritorio de ambos navegadores no se ven afectadas en mi caso.