Skip to content
This repository

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

Closed
toddparker opened this Issue July 08, 2011 · 8 comments

5 participants

Todd Parker Scott Jehl Diogo Doreto Steven Mask kvdml
Todd Parker

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.

Todd Parker

[ 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.

Diogo Doreto

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

Scott Jehl

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.

Scott Jehl scottjehl referenced this issue from a commit July 11, 2011
adjusted css3 prefixing for background gradients to a) increase brows…
…er support for standard prefixed gradients, and b) remove -ms filter gradients due to a rendering issue in IE9 that conflicts with border radius. Gradient support is set for IE10, however. More info on this bug and decision can be found at issue #2046. Fixes #2046. Fixes #1933. Addresses a portion of #13 as well.
e5e198a
Scott Jehl scottjehl closed this issue from a commit July 11, 2011
adjusted css3 prefixing for background gradients to a) increase brows…
…er support for standard prefixed gradients, and b) remove -ms filter gradients due to a rendering issue in IE9 that conflicts with border radius. Gradient support is set for IE10, however. More info on this bug and decision can be found at issue #2046. Fixes #2046. Fixes #1933. Addresses a portion of #13 as well.
e5e198a
Scott Jehl scottjehl closed this in e5e198a July 10, 2011
Timmy Willison timmywil referenced this issue from a commit July 11, 2011
adjusted css3 prefixing for background gradients to a) increase brows…
…er support for standard prefixed gradients, and b) remove -ms filter gradients due to a rendering issue in IE9 that conflicts with border radius. Gradient support is set for IE10, however. More info on this bug and decision can be found at issue #2046. Fixes #2046. Fixes #1933. Addresses a portion of #13 as well.
9e8e359
Steven Mask

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

kvdml
kvdml commented May 09, 2012

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

Todd Parker

@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
kvdml commented May 11, 2012

@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
kvdml commented May 11, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.