scratch/multi/blog/2010-07-07-CSS-rendering-problems-by-navigator.md

-----
isHidden:       false
menupriority:   1
kind:           article
created_at:     2010-07-07T15:43:43+02:00
fr: title: N'utilisez pas de gradients avec Chrome
en: title: Do not use CSS gradient with Chrome
author_name: Yann Esposito
author_uri: yannesposito.com
tags:
  - css
  - web
  - programming
  - Chrome
  - Safari
  - Firefox
-----

en: Some [Reddit](http://reddit.com) users reported my website was really long to load and to scroll.
en: They thinks it was because of the '1px shadow' I apply on all the text.
en: I was a bit surprised, because I make some test into a really *slow* virtual machine. And all have always worked fine. In fact, what slow down so much are by order of importance:
fr: Beaucoup d'utilisateurs de [Reddit](http://reddit.com) m'ont rapporté que mon site était très long à charger et à *scroller*.
fr: Ils pensaient qu'il s'agissait d'un problème dû aux ombres que j'applique sur le texte.
fr: J'étais un peu surpris puisque je fais mes tests sur une machine vraiment très lente et je n'avais jamais détecté ces problèmes.
fr: En réalité, ce qui ralenti le rendu de ce site est par ordre d'importance :

en: 1. Radial gradient on Chrome (not in Safari on Mac)
en: 2. Box shadows on Firefox and Chrome
fr: 1. Les dégradés sur Chrome (pas dans Safari sur Mac)
fr: 2. les *box shadows* sur Firefox

en: ## Gradient
fr: ## les dégradés

en: On Safari on Mac there is absolutely no rendering time problem. But when I use Chrome under Linux it is almost unusable.
fr: Sur Safari il n'y a absolument aucun problème avec les dégradés. Par contre sur Chrome sous Linux le site devient quasiment inutilisable.

en: Safari and Chrome use webkit, when you access my website with javascript enabled, an additionnal browser specific CSS is loaded. Until now I switched only between: IE, Mozilla and Webkit. Now I added one more special case for Chrome. Now I continue to use gradient for Safari but no more on Chrome.
fr: Safari et Chrome utilisent *webkit* tous les deux. Lorsque vous accéder à ce blog avec javascript activé, un CSS spécifique à votre navigateur est ajouté. Jusqu'à maintenant je faisais un tri entre : IE, Mozilla et Webkit. Maintenant j'ai rajouté un cas particulier pour Chrome.
fr: Maintenant j'ai supprimé les gradients lorsque vous naviguer sur ce site en utilisant Chrome.

en: I didn't tried to verify the efficiency of all new CSS 3 features. But I advise you not to use **`-webkit-gradient`** on Chrome. At least when the host is a Linux.
fr: Je n'ai pas vérifier la vitesse de rendu de toutes les propriétés de CSS 3. Mais je vous conseille de ne pas utiliser **`-webkit-gradient`** avec Chrome. Au moins sous Linux.

en: ## Box Shadows
fr: ## Les ombres (box-shadow)

en: I also detected that **`-moz-box-shadow`** elements slow down the rendering on Firefox under Linux. But there was very few time rendering issue with Safari on Mac.
fr: J'ai aussi remarqué que **`-moz-box-shadow`** ralenti le rendu sous Firefox (et sous Linux). Alors que l'équivalent webkit ne pose aucun problème à Safari sous Mac.

en: ## Text Shadows
fr: ## Ombres de texte

en: Many tell me to use text-shadows sparingly. But I believe it was not the real reason of the slow down. This is why I'll get them back.
fr: Beaucoup d'utilisateurs mon dit d'utiliser text-shadows avec parcimonie. Mais je pense qu'il ne s'agissait pas là du problème du ralentissement du site. C'est pourquoi je vais les remettre.

en: ## Conclusion
fr: ## en conclusion

en: Do not use **`-webkit-gradient`** on Chrome browser yet.
en: Try to use **`-moz-box-shadow`** sparingly.
en: N'utilisez pas **`-webkit-gradient`** avec google Chrome pour l'instant.
en: Utilisez **`-moz-box-shadow`** avec parcimonie.