I've the problem, that with an absolute positioned SVG element, which should be displayed above a div element, a gap is shown in Firefox 71.0 (64-bit).
The following minimal example outlines the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example</title>
<style>
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100%;
}
body > div {
flex-grow: 1;
}
#special {
position: relative;
background-color: #000;
color: #FFF;
}
#special svg, #special div {
position: absolute;
width: 100%;
bottom: 100%;
}
#special div {
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
Box one
</div>
<div id="special">
<svg color="#6A4A3C" viewBox="0 0 100 2">
<polygon
points="0 0, 100 0, 100 2, 20 0, 0 2"
transform="scale(1 -1) translate(0 -2) scale(-1 1) translate(-100 0)"></polygon>
</svg>
<!--<div>
Magic div
</div>-->
Box two
</div id="special">
</body>
</html>
You can run test this code in here. When you increase or decrease the width the gap changes:
I'm looking for a solution, which doesn't just push the SVG one pixel down, as it would look ugly where the divider touches the other div.
Oddly Chrome doesn't do that, but it does at the sides. How can I prevent this issues?