Shadow and border are separated when using CSS translations
When using both border and shadow on a single element that is absolutely positioned using negative translation (method explained here ), I am experiencing an odd rendering error in Firefox and IE (it seems to work in Chrome).
When an element is unevenly sized, the element is placed half a pixel, which (likely due to different rounding) separates the shadow and border from each other, revealing an ugly gap:
An example is available in this codepen , but you can also reproduce this by placing a div in the document and using after the CSS:
body {
background: black;
}
div {
position: absolute;
top: 50%;
left: 50%;
width: 299px;
height: 99px;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px 20px springgreen;
border: 10px solid deepskyblue;
}
Do you have an idea how to avoid this problem, how can I force the element to be placed at full pixel? I tried to add transform-style: preserve-3d
to the parent as suggested in the article, but it didn't work.
source to share
I could only reproduce the bug in Internet Explorer 11 and edge. It seems to work fine in FireFox and Chrome (haven't tested others like Opera).
Note: Half-pixel problems only occur when the render area itself is unevenly sized.
You may have discovered this on your own, but for reference: The only workaround I've found is to use values that will be rounded to full pixels. Adding a .1
non-uniform size to your element will make it round to the nearest higher value so that it "snaps" to the pixel in browsers that do not support true subpixel rendering, while in browsers that do. 20th pixel.
So the update code will be
div
{
position: absolute;
top: 50%;
left: 50%;
width: 299.1px;
height: 99.1px;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px 20px springgreen;
border: 10px solid deepskyblue;
}
You can find the code pen a demo of the problem and a fix that I personally use.
source to share