Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Remove -ms-filter gradient rules from the theme CSS for IE9/Mango #2046
We were doing gradient testing and found some disappointing results: In both IE9 and the forthcoming Mango release for WP7, the -ms-filter gradient rules cause serious rendering issues with the rounded corner rules, causing the background color of the element to break out of the rounded corners. We've discussed this with Microsoft and the browser team won't be fixing this rendering issue because the filters syntax is deprecated as they are moving to the standard CSS gradient syntax for IE 10.
So we're left with a tough choice: if we leave the -ms-filter gradient rules in our CSS so gradients look good in IE8, it will seriously degrade the experience in IE9/Mango with rounded corners. At this time, we are planning on removing -ms-filter gradient rules so IE8/9 and Mango will display flat background colors throughout the UI. This will enable rounded corners to display cleanly in IE9/Mango (IE7/8 don't support border-radius). We think this is the best course of action and places us in a better position for the future.
Must be removed from both the default and valencia stylesheets.
[ Copying some additional notes over from an older issue ]
Unfortunately, it turns out that in IE9 there is a serious rendering issue with the gradient -filter and border-radius that causes the color of the element to bleed over the rounded corners. You can see this in every page on IE9 and Mango. Discussion of the problem here:
The only workaround I saw was to nest the element with a gradient inside another wrapper element that has the border radius and an overflow:hidden rule. That is too ugly a hack for us to use on jQuery Mobile so unfortunately, it will look like this in Mango unless IE9 fixes up the rendering bug.
In discussions with Microsoft, we heard back that the IE team isn’t going to fix this – they consider the filter property to be deprecated. IE 10 will use the standard gradient syntax instead of filters (hooray).
For IE9, there’s two things we can do. Either fall back to using a solid color, or specify the gradient as a Data URI in the stylesheet, an example of which is shown here: http://msdn.microsoft.com/en-us/library/gg589491(v=VS.85).aspx#adding_a_transparent_gradient_overlay_as_a_data_uri
Since we're using CSS based gradients, not images, for the background textures the data-URI isn't a great option for us. All the themes are meant to be as lightweight and dynamic as possible so we only use a single image sprite for a given icon color and that's it. I'm not even sure how easy it would be to convert a CSS gradient into a image URI.
We're leaning towards going with a flat color across all versions of IE by removing the -filter rules from our CSS. Not ideal, but the gradients aren't displaying very reliably in IE 7/8 right now and the gradients break corners in IE9 so we're sort fo stuck unless we want to switch to background images (we don't). This would clean up the rendering issues in Mango, lighten up our CSS and be more future-looking.
@kvdml - there are a lot of issues with the filter approach. We dropped this technique a long time ago and don't use any filters at all. Here is a sample of our gradient syntax:
Which renders as 'filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) '
While this gives no problems on IE9, IE9Mobile has huge problems with filters: half of the page becomes unclickable. Workarounds: zoom the page a little or disable filters. I tried disabling just the reset-filter() but that doesn't work.