title: Why is there a small gap under an absolutely-positioned SVG?
body: <p>I set up a div, the orange one</p>
  <p><code>   position:relative</code></p>
  <p>and an SVG container absolutely positioned at the bottom.
  The SVG is just a triangle path in the middle of a 10x700 viewport</p>
  <pre><code>&lt;div class=&quot;sections-divider bottom&quot;&gt;   
     &lt;svg class=&quot;tiny&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 700 10&quot; preserveAspectRatio=&quot;none&quot;&gt;
        &lt;path fill=&quot;rgba(255, 255, 255, 1)&quot; d=&quot;M360 0L350 10 340 0 0 0 0 10 700 10 700 0&quot;&gt;&lt;/path&gt;
     &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code>/* Sections Separator */
  .sections-divider {
      position: absolute;
      left: 0;
      width: 100%;
      display: flex;
  }
  .sections-divider svg { width: 100%; height: 100%}
  .sections-divider.bottom {bottom: 0; top: auto}
  </code></pre>
  <p>Sometimes, not always, during page rendering, the SVG is not exactly at the bottom, it's some 0.8pixels on top, and an orange line of the bottom div can be seen, like the screenshot attached.
  This happens especially when chrome dev tools are open.</p>
  <p>I tried almost everything.</p>
  <p>The problem is that if I do</p>
  <pre><code>bottom: -1px
  </code></pre>
  <p>the orange line disappears, but the triangle's bottom corner is cut by 1 pixel and became a trapezium</p>
  <p>Am I missing something?</p>
  <p>Thanks</p>
  <p><a href="https://i.stack.imgur.com/3eXoL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3eXoL.png" alt="glitch show" /></a></p>