Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I have CSS3 gradient that I’ve generated with ColorZilla. I’m pretty sure what’s causing the problem is the DATA URI. Here’s my fiddle: http://jsfiddle.net/cY7Lp/.
In WebKit & Firefox, the corners are rounded as they should be, but in IE9, the corners are rounded and the gradient bleeds outside them, I don’t want the gradient to bleed outside the corners. Does anybody know why it happens?
—Edit—
I forgot to mention, this does not happen with inline elements, only block elements.
It has nothing to do with your SVG image or its data URI, but it has to do with your
filter. Effects generated by thefilterproperty, which you’re using, do not get clipped byborder-radius, and often overlap certain other things such as background images.Whether this is a real bug or an unintended side effect, I don’t know, but that’s the cause in IE9, as it doesn’t implement CSS3 gradients — only IE10 does.
Since you’re using an SVG image anyway, you can easily fall back to that instead of using
filter.