SVG width not filling on page scale

Question

I'm having a problem with a full width SVG (page width). When scaling my window it's creating a gap and when scaling further SVG is filled full width again. The screen is a image of the left end of the browser window.

The SVG:

<svg class="line line-top" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1280 50">
    <polygon points="0 0 1280 0 1280 0 0 50"/>
</svg>

You can see it in this fiddle try changing the viewbox height and the problem gap is starting to get smaller.

Any ideas?

Answer 1

You need to make the svg explicitly fill the page i.e.

body {
    background:red;
    margin:0;
    width: 100%;
    height: 100%;
}
html {
    width: 100%;
    height: 100%;
}

<svg fill="black" viewBox="0 0 1280 50" preserveAspectRatio="xMidYMin" width="100%" height="100%">
    <polygon points="0 0 1280 0 1280 0 0 50"/>
</svg>

Answer 2

The bug isn't fixed or found but I created an simple CSS solution by pulling it outside the browser en overflowing it. I know it's not the solution but at least the client doesn't notice :)

Something like:

svg{
   fill: currentcolor;
   left: -7px;
   position: absolute;
   width: 103%;
}

.container{
   overflow:hidden;
}