Remove -ms-filter gradient rules from the theme CSS for IE9/Mango

[toddparker]

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.

[toddparker]

[ 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:
http://stackoverflow.com/questions/4652793/border-radius-bug-on-a-in-ie9

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.

[DiogoDoreto]

IE9 supports 'background-clip' property. I can't test right now, but i think it should fix, shouldn't?

[scottjehl]

We already have background-clip implemented. As far as we can tell (and MS has verified this for us), there's no workaround without resorting to images.

[mnicpt]

I believe you can get around it by doing a border-radius on an outer div and the filter on the inner one.

[kvdml]

the -ms-filter gradient rules are very unstable on IE9 mobile and can cause buttons to be non-clickable. I just submitted an issue for this

[toddparker]

@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:

    background-image: -webkit-gradient(linear, left top, left bottom, from( #444 /*{a-body-background-start}*/), to( #222 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);

[kvdml]

@toddparker
there's still some filters in mixins.less: starting at line#355:
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
line 477 of mixins.less:
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

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.

[kvdml]

Grr, mixed up the tabs in my browser. There's no problem with jquery mobile, there's one with Twitter Bootstrap. Sorry for the inconvenience