IE9 Background Gradient + Border Radius == Fail

15. September 2010 15:09
ie9 rounded corner with background radius fail

Okay, I've been working on creating a CSS3 friendly version of the site where I am currently working. I've been using the very cool CSS3 PIE(Progressive IE) to bring a lot of functionality to the interface for IE. It works natively in Firefox 3.x, Chrome, and Safari. There is no support for background gradients in Opera 10, but the fallback doesn't look too bad for < 2% of users that have it. IE 6-8 have been tricky, but I've managed to get a lot of it the way I want, with minimal JavaScript for interaction (only enough to make some UI elements bind consistently). IE9 was just released in beta today, and I was glad to see it, and it's improved rendering enhancements.

Then I come to find out that IE9 ate my PIE. PIE simply didn't work for the background gradients or rounded corners in IE9. So I pushed all the behavior declarations into an IE lt 9 conditional comment. I also added another stylesheet for IE9. From here, I proceeded to add the necessary DXImageTransform.Microsoft.gradient references for IE9, which doesn't support the background: linear-gradient(...) css directive. You can see the results to the left, the DX transformation clobbers the rounded corners.

EDIT: 2011-01-10

With IE9, you can do an inset box-shadow to accomplish a similar effect, without failing to work with the borders. The effect is better on buttons, and supported almost everywhere, including Opera 10.5+ ... for IE6-8 you can fall back to the linear-gradient with PIE. Also, the latest CSS3PIE disables itself for IE9, until that feature set can be flushed out.

EDIT: 2011-09-26

With IE9, you can do an inline SVG background in the CSS, Microsoft even created an SVG Gradient Background Maker. It is worth noting that all the browsers (that I know of) which support CSS3 background gradients also support an SVG in the CSS directly. If you use the generation tool, you should wrap the url text in a single-quote. In other words url('...') not url(...) as the tool generates. Many CSS minifiers will have issues if the url text isn't quoted.


Tags:

Comments are closed

Tracker1

Michael J. Ryan aka Tracker1

My name is Michael J. Ryan and I've been developing web based applications since the mid 90's.

I am an advanced Web UX developer with a near expert knowledge of JavaScript.