2010-08-23 12:26:48 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
2010-10-04 21:34:25 +00:00
< meta name = "keywords" content = "CSS, web, programming, Chrome, Safari, Firefox" >
2010-08-23 12:26:48 +00:00
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomen" / >
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "N'utilisez pas de gradients avec Chrome" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2010-07-07-CSS-rendering-problems-by-navigator/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Do not use CSS gradient with Chrome" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2010-07-07-CSS-rendering-problems-by-navigator/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
2011-01-19 14:59:52 +00:00
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
2010-11-17 10:10:55 +00:00
<!-- < % if containMaths %>
< script type = "text/javascript" src = "/Scratch/js/MathJax/MathJax.js" > < / script >
< % end %>
-->
2010-08-23 12:26:48 +00:00
< title > Do not use CSS gradient with Chrome< / title >
< / head >
< body lang = "en" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "loading..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
2010-09-27 18:49:15 +00:00
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/fr/blog/2010-07-07-CSS-rendering-problems-by-navigator/" onclick = "setLanguage('fr')" > en Français< / a >
< / div >
< / div >
< img src = "/Scratch/img/presentation.png" alt = "Presentation drawing" / >
2010-08-23 12:26:48 +00:00
< div id = "titre" >
< h1 >
Do not use CSS gradient with Chrome
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< p > Some < a href = "http://reddit.com" > Reddit< / a > users reported my website was really long to load and to scroll.
They thinks it was because of the ‘ 1px shadow’ I apply on all the text.
I was a bit surprised, because I make some test into a really < em > slow< / em > virtual machine. And all have always worked fine. In fact, what slow down so much are by order of importance:< / p >
< ol >
< li > Radial gradient on Chrome (not in Safari on Mac)< / li >
< li > Box shadows on Firefox and Chrome< / li >
< / ol >
< h2 id = "gradient" > Gradient< / h2 >
< p > On Safari on Mac there is absolutely no rendering time problem. But when I use Chrome under Linux it is almost unusable.< / p >
< p > 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.< / p >
< p > I didn’ t tried to verify the efficiency of all new CSS 3 features. But I advise you not to use < strong > < code > -webkit-gradient< / code > < / strong > on Chrome. At least when the host is a Linux.< / p >
< h2 id = "box-shadows" > Box Shadows< / h2 >
< p > I also detected that < strong > < code > -moz-box-shadow< / code > < / strong > elements slow down the rendering on Firefox under Linux. But there was very few time rendering issue with Safari on Mac.< / p >
< h2 id = "text-shadows" > Text Shadows< / h2 >
< p > 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.< / p >
< h2 id = "conclusion" > Conclusion< / h2 >
< p > Do not use < strong > < code > -webkit-gradient< / code > < / strong > on Chrome browser yet.
2010-10-06 22:23:05 +00:00
Try to use < strong > < code > -moz-box-shadow< / code > < / strong > sparingly.< / p >
2010-08-23 12:26:48 +00:00
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomen" >
Subscribe
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Comments< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > comments< / h2 >
< noscript >
2010-10-26 14:49:21 +00:00
You must enable javascript to comment.
2010-08-23 12:26:48 +00:00
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
2010-12-21 16:18:52 +00:00
var idcomments_post_id = '/Scratch/en/blog/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/en/blog/';
2010-08-23 12:26:48 +00:00
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2011-01-06 14:09:34 +00:00
< ul > < li > < a href = "/Scratch/en/" > Home< / a > < / li >
2010-08-23 12:26:48 +00:00
< li > < a href = "/Scratch/en/blog/" > Blog< / a > < / li >
2010-09-30 13:01:14 +00:00
< li > < a href = "/Scratch/en/softwares/" > Softwares< / a > < / li >
2010-09-28 01:00:51 +00:00
< li > < a href = "/Scratch/en/about/" > About< / a > < / li > < / ul >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
previous entries
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/" > < span class = "nicer" > «< / span > Cappuccino vs jQuery< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2010-06-19-jQuery-popup-the-easy-way/" > < span class = "nicer" > «< / span > jQuery popup the easy way< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2010-06-17-hide-yourself-to-analytics/" > < span class = "nicer" > «< / span > Hide Yourself to your Analytics< / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div id = "next_articles" >
next entries
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2010-07-31-New-style-after-holidays/" > New style after holidays < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2010-07-09-Indecidabilities/" > Undecidabilities (part 1) < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
2010-08-23 13:34:35 +00:00
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2010-08-23-Now-heberged-on-heroku/" > Now hosted by heroku < span class = "nicer" > »< / span > < / a >
2010-08-23 13:34:35 +00:00
< / div >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/" > Copyright ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
2010-08-31 13:06:43 +00:00
Created: 07/07/2010
2010-10-06 22:37:01 +00:00
Modified: 10/07/2010
2010-08-23 12:26:48 +00:00
< / div >
< div >
Entirely done with
< a href = "http://www.vim.org" > Vim< / a >
and
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
< a href = "/Scratch/en/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/en/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
2011-01-19 14:59:52 +00:00
< script type = "text/javascript" >
var clicky = { log: function(){ return; }, goal: function(){ return; }};
var clicky_site_id = 66374905;
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = ( document.location.protocol == 'https:' ? 'https://static.getclicky.com/js' : 'http://static.getclicky.com/js' );
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
< / script >
< noscript > < p > < img alt = "Clicky" width = "1" height = "1" src = "http://in.getclicky.com/66374905ns.gif" / > < / p > < / noscript >
2010-08-23 12:26:48 +00:00
< / body >
< / html >
