J'ai ajouté un box-shadow Je sais que CSS3 est encore nouveau, mais est-ce la raison du retard ? Le logiciel est d'être d'ombre 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 a d'autre cette expérience p> Je viens d'essayer sur la page avant le débordement de pile, sur le code> à une section d'une page récemment pour lui donner la même ombre effet frontière qui est vu sur Mac OS X apps. 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 em>). Je l'origine décidé de box-shadow utilisation puisque je me suis dit qu'il supprimerait la nécessité d'utiliser une image, qui supprimerait toute possibilité de retard de défilement. #content code> div en utilisant Firebug avec un réglage de:. -moz-box-shadow: 1px 1px 10px;
4 Réponses :
Votre meilleur pari serait d'utiliser -Moz-Bordure -Image à la place. Cela devrait résoudre vos deux problèmes.
E.g. Vous pouvez utiliser une image comme celle-ci, pour créer votre ombre. Et puisque vous utilisez une image, vous pouvez également laisser l'ombre inférieure, si vous le souhaitez. Vous ne pourrez pas retirer l'ombre du bas en utilisant < code> -moz-box-ombre ; Ce n'est pas appelé "ombre de la boîte" pour rien. Il applique une ombre dans toute la boîte. Vous ne pouvez pas spécifier une ombre pour chaque côté, comme avec Je reçois aussi le décalage ombre de la boîte lorsque je l'essaie sur Stackoverflow. Il affecte les performances sur Safari également lorsque j'essaie 
, combiné à CSS comme celui-ci
frontière , par exemple. Le meilleur que vous puissiez faire est de jouer avec le placement, de flou et de la propagation de l'ombre. Mais cela conduit inévitablement à une ombre plus sombre du côté opposé. -webkit-box-box-shadow , bien qu'il ne soit pas aussi remarquable que dans Firefox. Les performances espérons-elles s'améliorer à l'avenir, mais je présume que l'ombre aura toujours un impact depuis aussi loin que je le sais est logiciel rendu.
Merci d'apprécier la réponse détaillée, je suis sûr que d'autres trouveront cela utile. Malheureusement, la section (l'attribut #Page de mon site, disponible dans mon profil) a des coins arrondis de 2em, donc j'imagine que ce serait assez difficile à faire. Je suppose que je devrais faire une image comme celle que vous avez fournie mais avec un fond transparent et des coins arrondis aussi. Merci quand même! Bon à savoir.
Ceci a été corrigé dans WebKit il y a deux jours. :)
toujours assez lent ici, sur chrome 10
Cela peut également avoir quelque chose à voir avec votre chauffeur graphique. Sur ma machine à tester (double écran, une verticale, une horizontale), la performance de Safari et Firefox4.0b7 est affreuse à l'écran 2, mais bien à l'écran 1. Aucun problème à l'aide de Firefox 4.0rc1 cependant.
#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#
}
Cross browser version for old and new browser.
Simple img: http://i28.tinypic.com/2njzkt1.pngstyle :fixed for images too overload perfomance browser
Le problème persiste toujours en Chrome pour Android à la date actuelle. Certaines combinaisons de la boîte-shadow entraînent une mauvaise performance de défilement. Dans mon cas, l'empilement de deux ombres d'encadrement (par exemple le haut / bas) mène au problème décrit. La seule solution que je puisse fournir est de rendre les ombres de la boîte moins complexes et de réessayer ... qui a fonctionné pour moi. C'est insatisfaisant mais oui à la place, vous pouvez également utiliser la solution d'image frontalière ou supprimer complètement l'ombre de la boîte affectée. J'espère que cela se fixe bientôt, enfin. BTW La version Android de Firefox n'a plus les problèmes (pour mon CSS3). De plus, les versions de bureau des deux navigateurs ne sont pas affectées dans mon cas.