Retraso de desplazamiento con la propiedad box-shadow de CSS3?

Question

He añadido una box-shadow a una sección de una página recientemente para darle el mismo efecto frontera sombra que se ve en Mac OS X aplicaciones. Se ve muy bien, pero me di cuenta de que el desplazamiento hacia arriba y hacia abajo en la página hizo retraso. Por lo general sólo ver esto en las páginas que tienen imágenes de fondo molestos y toneladas de imágenes y vídeos incrustados pegados en ( tos tos MySpace ). Originalmente decidí usar box-shadow, ya que pensé que sería eliminar la necesidad de utilizar una imagen, lo que eliminaría cualquier posibilidad de desfase de desplazamiento.

Sé que CSS3 es todavía nuevo, pero esta es la razón para el retraso? Es el ser instantáneas de software prestado o algo? Cuando aplico la caja de sombra a los elementos más pequeños, que no se queda en absoluto. Me pregunto si alguien más ha experimentado esto.

he intentado que en la primera página de desbordamiento de pila, en el div #content 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 quiero añadir un borde de estilo de Mac OS X para una sección de mi página?

En una nota lateral, ¿alguien sabe si es posible aplicar la caja de sombra sólo en la parte superior, izquierda, y derecha del elemento y no el fondo? Probé 1px -1px 10px pero todavía muestra la sombra en la parte inferior. Si sigo disminuyendo el segundo desplazamiento, el tiempo se elimina la sombra de la parte inferior, pero entonces la sombra superior es ahora camino más oscuro y más grande.

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

• CSS3 Información
• de fredericiana el blog

Answer 1

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

por ejemplo. usted podría utilizar una imagen como esta, , Combinado con CSS como esto

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

para crear su sombra. Y ya que estás usando una imagen, se puede dejar de lado la sombra inferior, así, si lo desea.

---

No vas a ser capaz de eliminar la sombra de la parte inferior con -moz-box-shadow; no se le llama "caja de sombra" para nada. Se aplica una sombra a todo el cuadro. No se puede especificar una sombra para cada lado por separado al igual que con border, dice. Lo mejor que podría hacer es ver alrededor de la colocación, el desenfoque y la propagación de la sombra. Pero que inevitablemente conduce a una sombra más oscura en el lado opuesto.

Me da la sombra lag caja también cuando intento en Stackoverflow. Afecta el rendimiento en Safari, así cuando intento -webkit-box-shadow, aunque no es tan notable como en Firefox. El rendimiento es de esperar mejorará en el futuro, pero supongo la sombra siempre tendrá algunos de impacto ya que por lo que yo sé que es software de renderizado.

Answer 2

Esto se ha corregido en webkit hace a partir de dos días. :)

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

Puede recoger un cromo noche para probarlo.

Me miré en FF3.6 y FF4 y no veo el rendimiento de desplazamiento terribles allí, por lo que podría ser dirigida allí también.

Answer 3

El problema persiste en Chrome para Android a partir de la fecha actual. Algunas combinaciones de caja de sombra como resultado un bajo rendimiento de desplazamiento. En mi caso apilando dos inserción de la caja-sombras (por ejemplo, arriba / abajo) conducir al problema descrito. La única solución que puedo ofrecer es hacer que los cajones-sombras menos complejo y vuelve a intentarlo ... que trabajó para mí. Eso es poco satisfactorio, pero sí en cambio u también puede utilizar la solución de imagen Frontera o eliminar el box-shadow afectados por completo. Espero que esto se solucionará en breve, por fin. Por cierto la versión de Android de Firefox no tiene los problemas más (para mi CSS3). Por otra parte las versiones de escritorio de ambos navegadores no se ven afectados en mi caso.

Answer 4

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

Cruz versión del navegador de tu navegador es antiguo y nuevo. img simple: http://i28.tinypic.com/2njzkt1.png

estilo : fija para imágenes también sobrecargan el navegador del perfomance