title: cross-browser gradients: browser performance issues?
body: <p>I have attempted to tag this question <code>[subjective]</code> (it won't let me) because I realise it may be unanswerable, may be common knowledge that I don't know how to find, or perhaps a matter of opinion.</p>
  
  <p>For a few months I've been building commercial web sites using a compiled (LESS) style sheet, with rules like the following every time a background gradient is applied to an element:</p>
  
  <pre><code>body {
    background: #592a0e;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzJkMTUwNyIgLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4NTNmMTUiIC8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cpIiAvPjwvc3ZnPg==);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#2d1507), to(#853f15));
    background: -webkit-linear-gradient(left, #2d1507, #853f15);
    background: -moz-linear-gradient(left, #2d1507, #853f15);
    background: -ms-linear-gradient(left, #2d1507, #853f15);
    background: -o-linear-gradient(left, #2d1507, #853f15);
    background: linear-gradient(left, #2d1507, #853f15);
    filter: progid:dximagetransform.microsoft.gradient(StartColorStr='#2d1507', EndColorStr='#853f15', GradientType=1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2d1507', EndColorStr='#853f15', GradientType=1)";
    zoom: 1;
  }
  </code></pre>
  
  <p>The SVG inline gradients, compiled in LESS from the start &amp; end colours, are there for IE9.  Otherwise IE9 will display the rectangular IE filter gradient beyond the rounded corners of an element with nonzero <code>border-radius</code>.  (Elsewhere in the CSS is set <code>.ie9 a, .ie9 div { filter: none !important; }</code> to suppress the IE filters for IE9 only.)</p>
  
  <p><em><strong>My question:</em></strong> I am worried about possible performance issues and would like to learn how to investigate them fully, or perhaps if these issues are small to discharge these worries for good.  For example, <a href="http://krishna.ie" rel="nofollow">this site</a> uses such a background declaration 21 times, based on all the horizontal &amp; vertical gradients, menu items, titles, buttons, and hover properties.</p>
  
  <p>I have no evidence of performance problems on such sites, but how might I determine if the following hypothetical problems could be causing a performance issue, how might I investigate it, and how might I recode to avoid it?</p>
  
  <ul>
  <li>Does the more complicated CSS lead to slower rendering times?  All such sites are designed to be mobile-friendly so I'm worried the rendering, and maybe the parsing, may be an issue on older mobile browsers.</li>
  <li>To simplify the CSS, and to avoid overusing the browser class <code>ie9</code> (we generally use <code>modernizr</code> for feature detection), the SVG gradient and the CSS gradient declarations are kept in the same rule set.  The alternative would be much more complicated CSS with separate IE9 rules (with SVG gradient) for every element with a gradient.  In my decision to keep the CSS simple, I'm worried that the code above might be painting the background twice, and that this might lead to a performance problem.</li>
  <li>For non-IE browsers, which already understand the CSS background gradient, is parsing the inline SVG gradient burdensome?  Does this cause a performance degradation every time a page is rendered, or just when the CSS is originally read &amp; parsed?</li>
  </ul>
  
  <p>I am certainly open to correction if I have made any serious errors, left out any important browsers, or neglected any other performance issues.  If anyone is interested I will post the LESS code that compiles the SVG gradients, although it's not related specifically to my question.</p>