Resolved: Why is there a small gap under an absolutely-positioned SVG?

Question:

I set up a div, the orange one
position:relative
and an SVG container absolutely positioned at the bottom. The SVG is just a triangle path in the middle of a 10×700 viewport
CSS code:
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.
I tried almost everything.
The problem is that if I do
the orange line disappears, but the triangle’s bottom corner is cut by 1 pixel and became a trapezium
Am I missing something?
Thanks

Answer:

This may sound weird, and it indeed seems to be a rendering bug, but the way I solve it is to set a -1px negative margin on the SVG. In your case, like:
This always seems to fix it for me.
If this still cuts stuff off, my guess is you can experiment with smaller (perhaps half-pixel even) values, but I consider the single pixel value as the smallest cross-browser-safe unit.
Additionally, you can try adding one pixel to both your SVG’s (viewbox) width and height, and then apply this trick in CSS.

If you have better answer, please add a comment about this, thank you!