Menu
Does anybody have an idea on how to "fix" the rendering in IE 9 and 10 of a combination of box-shadow and border-radius?
It's especially noticeable when using inset shadows. The radius of the shadow is very different in IE compared to webkit/gecko...
In this image you can see the problem. On the left is a button with an inset box-shadow, on the right without box-shadow. (don't mind the different font-rendering)
Here's the code used: http://dabblet.com/gist/5450815
716
Not possible, because box-shadow is generated based on the entire boundary of the element — you can't select which boundaries you don't want the shadow to be computed... unless you are willing to set a negative offset on the y-axis: box-shadow: 0 -19px 19px 2px rgba(0, 0, 0, 0.1);
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas.
You can comma separate box-shadow any many times as you like.
The problem only occurs when the spread of the inset shadow triggers a larger "shadow-radius" than the size of the border-radius in IE. Set the border-radius to 50px in your example and it looks the same in IE and Chrome.
If you need a bigger box-shadow spread then you can just use a border instead, at least in your examples that would do the trick. Example: http://dabblet.com/gist/5501799
Another problem you might see is that IE and Chrome render the blur of the box-shadow totally different, but I assume you're not using it in your example for that reason...
146
A quick (semi dirty) solution, which I have tried and works, is a div inside a div. Let me know if this does it.
HTML CODE:
</head>
<body>
<div class="box"><div class="box-inside"></div></div>
</body>
</html>
CSS CODE:
.box {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #000;
width: 200px;
height: 100px;
background: #000;
}
.box-inside {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #fff;
width: 175px;
height: 75px;
position: relative;
top: 12%;
left: 6%;
background: #fff;
}
My jsfiddle
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
