I have 2 different styles for the h1 element, depending on the parent element. In the first one their are no gradients, and the border-radius works. In the second one the border-radius does not work, and I am using gradients. So far, the only browser with this problems is IE 9, in all others everything works as intended. Could someone tell me if gradients are causing this or if there is something else I am missing.
I came across this problem & none of the solutions were appropriate for me, but I found one that worked.
If you use http://www.colorzilla.com/gradient-editor/ to generate your gradient, choose the ‘IE9 Support’ option, which adds SVG support. Follow the instructions there to add an extra class in IE9 and this will work with border radius.
Both of which renders the top-left-radius on IE9. In short the top-left-radius is being rendered twice on IE9. Removing “-ms” in “-goog-ms-border-top-left-radius: 10px;” fixes this problem.
Note: I noticed this problem because in my blog, I used to specify both styles and noticed that blog scrolling was jerky. After trying to find many small refinements in my blog I realized that both styles are being rendered on IE9.