Why is my SVG with position absolute not exactly at the edge? - css

Question

Whenever I try to position a scaled SVG with position: absolute;, and use 0 as the positioning parameter (i.e. top:0;) the svg does not seem to connect seamlessly.
Especialy when zooming or when creating a responsive layout, this seems to occure.
Consider the following example:
an item with SVG's as rounded corners:
<div class="item">
<svg class="corner top-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner top-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
</div>
The corners are positioned with position: absolute; and rotated in css
.corner {
position: absolute;
height: 20px;
}
.top-left {
left: 0;
top: 0;
}
.top-right {
top: 0;
right: 0;
transform: rotate(90deg);
}
.bottom-left {
bottom: 0;
left: 0;
transform: rotate(-90deg);
}
.bottom-right {
bottom: 0;
right: 0;
transform: rotate(180deg);
}
Now, depending on your screen resolution, you'll see the corners won't all fit seamlessly to the edge. Also when zooming in/out to the website oyu'll see a gap between the SVG and the edge of the element.
A dirty fix is to just offset the element minus 1 pixel in the direction it is positioned. However, the gap seems to be smaller than 1 pixel, thus breaking the design of the element when offsetting 1 pixel. Also, the gap does not appear all the time, only at certain pixel breakpoints.
Does anyone know how to fix this?
FIDDLE
To clarify, I want to prevent these lines from happening:

Answer 1

I'm not sure there is a particularly elegant solution to this problem. It affects Firefox mostly, because I believe Chrome/Webkit tends to snap elements to pixel boundaries, whereas Firefox doesn't.
One solution is to alter your paths so that they draw slightly outside the SVG and then set the <svg> to overflow="visible".
<svg class="corner top-left" ...snip... viewBox="0 0 10 10" overflow="visible">
<path class="st0" d="M10,0 V-2H-2V10H0c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
</svg>
Here, for this top-left SVG, I have created a two-unit "porch" up and to the left. Then if overflow is set to visible, the path will overdraw the little red lines caused by anti-aliasing/rounding.
Here's a demo fiddle with (only) the top left SVGs modified.