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

user_5053475 0
Viewed 40

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 10x700 viewport

<div class="sections-divider bottom">   
   <svg class="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 10" preserveAspectRatio="none">
      <path fill="rgba(255, 255, 255, 1)" d="M360 0L350 10 340 0 0 0 0 10 700 10 700 0"></path>
   </svg>
</div>

CSS 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}

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

bottom: -1px

the orange line disappears, but the triangle's bottom corner is cut by 1 pixel and became a trapezium

Am I missing something?

Thanks

glitch show

google-chrome svg css html
1 Answers

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:

.sections-divider svg {
    margin: -1px;
}

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.

user_11757390
Related