Lag Faites défiler la propriété CSS3 box-shadow?

Question

J'ai ajouté un box-shadow à une section d'une page récemment pour lui donner le même effet d'ombre à la frontière qui est vu sur les applications Mac OS X. Il avait l'air super, mais je remarque que le défilement vers le haut et vers le bas sur la page fait lag. D'habitude, je ne vois cela sur les pages qui ont des images de fond ennuyeux et des tonnes d'images et de vidéos intégrées partout sur ( toux MySpace toux ). Au départ, je décidé d'utiliser-box shadow car je me suis dit qu'il supprimerait la nécessité d'utiliser une image, qui supprimerait toute possibilité de retard de défilement.

Je sais que CSS3 est encore nouveau, mais est-ce la raison du retard? Est-ce l'ombre logiciel étant rendu ou quelque chose? Lorsque je demande l'ombre de la boîte aux éléments plus petits, il ne traîne pas du tout. Je me demande si quelqu'un d'autre l'expérience.

Je viens d'essayer sur la page avant débordement de la pile, sur la #content div en utilisant Firebug avec un réglage de:

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

Et j'ai remarqué un certain retard de défilement après. J'utilise Firefox 3.5.

Ma question est, quelles sont les alternatives à l'utilisation de cet attribut si je veux ajouter une bordure de style Mac OS X à une partie de ma page?

Sur une note de côté, personne ne sait s'il est possible d'appliquer l'ombre seule case vers le haut, à gauche, et à droite de l'élément et non le fond? J'ai essayé 1px -1px 10px mais il montre encore l'ombre sur le fond. Si je continue à diminuer le second décalage, il élimine éventuellement l'ombre du fond mais l'ombre du haut est maintenant façon plus sombre et plus.

Et oui, je l'ai vu les articles sur box-shadow à:

• CSS3 Infos
• Le blog fredericiana

Answer 1

Votre meilleur pari serait d'utiliser -moz-border-image à la place. Cela devrait résoudre les deux vos problèmes.

par exemple. vous pouvez utiliser une image comme ça, , Combiné avec CSS comme ceci

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

pour créer votre ombre. Et puisque vous utilisez une image, vous pouvez laisser à l'ombre de fond et, si vous voulez.

---

Tu ne vas pas être en mesure d'éliminer l'ombre du fond en utilisant -moz-box-shadow; il ne l'appelle pas « l'ombre de la boîte » pour rien. Il applique une ombre à la boîte entière. Vous ne pouvez pas spécifier une ombre pour chaque côté séparément comme avec border, dites. Le mieux que vous pouvez faire est de bricoler avec le placement, le flou et la propagation de l'ombre. Mais cela conduit inévitablement à une ombre plus foncée sur le côté opposé.

Je reçois le décalage de l'ombre de la boîte et quand je l'essayer sur Stackoverflow. Il affecte les performances sur Safari et lorsque je tente -webkit-box-shadow, bien qu'il ne soit pas aussi visible que dans Firefox. La performance devrait améliorer à l'avenir, mais je suppose que l'ombre sera toujours certains depuis l'impact pour autant que je sais que logiciel rendu.

Answer 2

Ceci a été corrigé dans WebKit comme il y a deux jours. :)

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

Vous pouvez prendre un chrome de nuit pour essayer.

Je regardais dans FF3.6 et FF4 et ne pas voir les performances terribles de défilement là, il pourrait être traité là aussi.

Answer 3

Le problème persiste toujours dans Chrome pour Android à partir de la date actuelle. Certains combos boîte ombre entraînent une mauvaise performance de défilement. Dans mon cas, l'empilement de deux ombres boîte EISN (par exemple haut / bas) conduisent au problème décrit. La seule solution que je peux fournir est de rendre la boîte-ombre moins complexe et essayez à nouveau ... qui a fonctionné pour moi. C'est pas satisfaisant, mais oui à la place u peut également utiliser la solution border-image ou retirer la boîte ombre complètement affectée. Espérons que cela se fixe bientôt, enfin. BTW la version Android de Firefox n'a pas les problèmes plus (pour mon CSS3). De plus, les versions de bureau des deux navigateurs ne sont pas affectés dans mon cas.

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

Version Cross du navigateur pour l'ancien et le nouveau navigateur. Simple img: http://i28.tinypic.com/2njzkt1.png

Style : Autorisés pour les images trop surcharge navigateur perfomance