White stripe on top of SVG on some screensizes? - css

Question

I have a colored div followed by an svg. When changing my browser window, sometimes a small white line appears. How can I get rid of it?
.wave {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="red" d="M0,96L80,85.3C160,75,320,53,480,90.7C640,128,800,224,960,266.7C1120,309,1280,299,1360,293.3L1440,288L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"/></svg>');
height:180px;
background-size:100%;
background-repeat: no-repeat;
margin-top:-20px;
background-color:white;
}
<div style="background-color:red;width:100%;height:100px">
</div>
<div class="wave">
hallo
</div>

Answer 1

These are rounding artefacts that cannot be avoided. background-color:white introduces a white rectangle behind the svg, but on top of the top div that might be slightly too large. Remove it, and the svg content will sit directly on top of the div.
If you need an explicitely white background, apply it to an element that sits behind both the top div and the svg. For example like this, avoiding an extra DOM object:
.top {
position: relative;
background-color:red;
width:100%;
height:100px;
}
.top::after {
content: "";
position: absolute;
top: 100%;
width:100%;
height:180px;
z-index: -1;
background-color:white;
}
.wave {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="red" d="M0,96L80,85.3C160,75,320,53,480,90.7C640,128,800,224,960,266.7C1120,309,1280,299,1360,293.3L1440,288L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"/></svg>');
height:180px;
background-size:100%;
background-repeat: no-repeat;
margin-top:-20px;
}
<div class="top">
</div>
<div class="wave">
hallo
</div>