Currently I am rebuilding beta.tnyb.it. Most of the rebuild is focused on bringing in a new design as well as some much needed performance increases (both back-end and front-end). The redesign utilizes a lot of CSS3 and HTML5 in order to make a smooth transition from a desktop environment to a tablet environment when using the account dashboard. This type of design has lead me to discover a major flaw with IE9’s ability to render an element that has both a gradient and a border-radius declaration. IE9 will render the gradient background, but then ignore the border-radius declaration in the CSS.
background: #82c9ef; /* Old browsers */
/* background gradient for cross-browser compatibility */
background: -moz-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #82c9ef), color-stop(100%, #59ACD9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Chrome10+,Safari5.1+ */
background-image: -ms-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* IE10+ */
background: -o-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Opera11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c9ef', endColorstr='#59ACD9', GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #82c9ef 0%,#59ACD9 100%); /* W3C */
/* border radius for cross-compatibility */
Example (pure CSS3 and IE gradient filter)
missing border radius because of the ‘filter’ declaration
So how do you fix it? SVG of course!
Interestingly enough, Microsoft has a website specifically designed for this problem. Using the their tool, you can specify your gradients and it will automatically generate the SVG source and CSS markup needed. In IE9, you can clear the filter, assuming you need a border-radius, and use the SVG CSS markup the site generates for you. This creates the exact same gradient you specify with pure CSS3 markup, but allows for a border-radius in IE9.
The beauty of this is that it is compatible with all modern browsers. The background gradient is fluid and there’s not a visible difference between the SVG markup and the CSS3 markup. You could, theoretically, use this as a workable solution for all desktop browsers. The only flaw I have found is noted below, under ‘Issues’.
/* you can remove all CSS code not needed since we're targeting IE */
background: transparent none; /* reset the background, just in case */
filter: ''; /* clear the filter since it's the reason for the border-radius missing */
Example Fixed in IE9 (Removed cross-browser CSS3 and IE gradient filter)
filter declaration removed and SVG background used instead
Are there any issues with this method?
The only issue I have found so far is that the SVG markup kills performance in Chrome. I’m not sure if this because of the UI I have built specifically for tnyb.it’s new design or if it’s just a Chrome bug, but it brings Chrome to a hault. Until I can test more thoroughly, I’m only using the SVG markup in IE9 and sticking with CSS3 markup for all other browsers. I’m trying to move away from images as much as possible and only use them for logos/icons/etc. If it’s a background, there’s no reason you can’t use CSS these days.
For those without IE9, here’s a before and after