3

I'm hunting some very odd rendering issues in IE9 in windows 7. I'm using the microsoft "filter" method wherever there are gradients, it's HTML5, and everything is in standards mode.

Please note, as there has been some confusion: This is happening everywhere there are rounded corners, including in situations where there are no gradients, and even no background color at all. The specific issue can be seen in the screenshots below as gaps in the border and color getting repeated on the x-axis, INSIDE the element.

As far as I can tell, I have set up everything correctly, and of course it all renders just fine in firefox and webkit browsers.

Has anyone ever seen this? I'm chasing my tail and googling turned up squat.

Input box:

Round corners, input box Input Box

DIV with gradient background:

enter image description here

Edit:

The twitter-bootstrap link provided below exhibits exactly the same issues on all their example elements. Smarter people than me are working on that project, so I'm racking this up as un-solvable with CSS alone. Feel free to close.

Community
  • 1
  • 1
Carson C.
  • 2,362
  • 4
  • 18
  • 20
  • possible duplicate of [IE9 Border-radius and Background Gradient Bleeding](http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding). [This answer](http://stackoverflow.com/a/5899300/94197) appears to have the best solution, if you don't mind having an additional containing element to perform the clipping. – Andy E Feb 02 '12 at 14:08
  • This is not a duplicate... the issue I am posting here happens anywhere there are rounded corners, gradient background or not. See the screenshot of the input box above. – Carson C. Feb 02 '12 at 14:56
  • your question only mentioned gradients, but nevertheless, the solution I pointed you to in the *duplicate* should fix this too. – Andy E Feb 02 '12 at 15:02
  • I appreciate the link to the other thread, I'm sure it will be helpful in resolving one of the issues in the "DIV with gradient background" image above. However, if you will review the post above you will find that the other thread has no bearing on the primary issue shown. *bleed* is not what I am trying to resolve. – Carson C. Feb 02 '12 at 15:12
  • correct, but I still think that it would solve the first issue, too, because you'd be applying the border radius to an ancestor element rather than the input element. – Andy E Feb 02 '12 at 17:58

2 Answers2

3

thats a known bug in IE9 and theres no really easy solution* to get rid of this. the easiest ways would be:

  • use a background-image containing the gradient instead of a gradient for IE < 10
  • use a plain background-color instead of a gradient for IE < 10

twitter bootstarp, for example has to deal with this, too. they've chosen to use a plain background-color for their buttons as you can read here:

In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.

*ugly svg-for-ie-solution: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

oezi
  • 51,017
  • 10
  • 98
  • 115
  • Nice quote - you beat me to it by a minute or so! – CherryFlavourPez Feb 02 '12 at 14:11
  • An answer in the duplicate question shows that it can be done by setting the border radius on a parent element and the gradient on a child element for the clipping to apply. Working example [here](http://jsfiddle.net/hXcQb/). – Andy E Feb 02 '12 at 14:16
  • @AndyE - agreed, this should be closed as a duplicate - the extra element is the most elegant solution if both rounded corners and a gradient are necessary. – CherryFlavourPez Feb 02 '12 at 14:31
  • This happens even without gradients. Updated image above. – Carson C. Feb 02 '12 at 14:58
2

IE Filters and rounded corners don't play nicely together. You're going to have to choose between a solid background colour or square corners for IE. Vendor prefixed gradients are going to be supported in IE10, so there is that at least.

Twitter make note of this on the Bootstrap site, saying:

"In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners."
CherryFlavourPez
  • 7,529
  • 5
  • 45
  • 47