CSS3 Gradients, Border Radius and Internet Explorer 9

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.

#my-element {
	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 */
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

 

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 */
#my-element {
	background: transparent none; /* reset the background, just in case */
	filter: ''; /* clear the filter since it's the reason for the border-radius missing */
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5ODEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MkM5RUYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM1OUFDRDkiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c5ODEpIiAvPgo8L3N2Zz4=');
}

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

16 Comments

  1. Do you know if Microsoft is planning to fix in IE10?

  2. jj_jiles

    The CSS declaration is there for an actual linear gradient, but without having access to IE10 myself, I can’t answer for sure. If they ditch the filter declaration, that will probably fix things since that declaration is known to break lots of things in IE, such as font smoothing (discussed here http://jjis.me/a/407)

  3. this is the only useful information about border and gradient that is on the web at this time.
    Thanks – absolutely saved the day !

    • I absolutely agree with Markos. I have been all over the internet and had almost given up entirely until I came across this article.

      Now my site is rendering in ALL browsers which makes me extreely happy.

      One thing, do you have any information on how box shadows can be applied to the body element?

      It renders in FF and Chrome but I cant seem to get it to work in IE9+. The strangest thing is there are box shadows that display inside of an article div, so it makes no sense to me why it isnt showing.

      Has anyone else experienced this?

      Anyway, thank you again and will be sure to look around your site for more css3 tips and tricks.

  4. great! thanks..

    • jj_jiles

      Glad it helped. I have a jQuery modal I’ve been wanting to post. I just haven’t had time.

  5. Okay Great! Next logical question is… How do you create a SVG and then obtain the binary data to add after the “data:image/svg+xml;base64″ portion of the url in the css file?

    • jj_jiles

      The Microsoft website I link to will provide you with the encoded string, copy it and paste it the CSS background attribute.

      Should look like:
      background: { url(‘string copied from MS site’); }

      Hope that helps.

  6. Just for your information, but, the rounded corners of this page are not workin in IE9 ;)

    • jj_jiles

      Thanks for the catch. I likely killed something when updating templates. I will get it fixed.

  7. No Kidding… That is so amazing.

  8. Why doesn’t this work in IE 7

    • jj_jiles

      This wasn’t intended to work with IE7. Since IE7 doesn’t support CSS3, this will likely remain an issue. Best to have a fallback design for IE7

  9. great!

  10. What sort of solution is this if it creates an even bigger problem in Chrome?

    • jj_jiles

      If you do your CSS declarations properly, it should work in all browsers. Not to say it’s the best solution, but if you’re needing a solution, this is an option. Your other options are to rethink your design across all browsers, or make small adjustments that target IE only.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>