Seam forming between adjacent SVG images in flexbox

Question

I have split a single SVG image into parts and placed them in a single row of a CSS flexbox. The goal is to keep a constant height but allow the width to change. I can horizontally stretch parts certain parts of the image without causing aspect ratio issues while leaving the other parts constant.

The issue is that, specifically in firefox, a seam is visible between the adjacent SVG images:

.gb-top-border {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
}

.gb-top-border-column-flex-1 {
  flex: 10 10 auto;
  display: flex;
}

.gb-top-border-column-flex-2 {
  flex: 5 5 auto;
  display: flex;
  min-width: 0;
}

.gb-img-vfill {
  width: 100%;
  max-height: 100px;
}

.gb-img-top {
  max-height: 100px;
}

.pad {
  padding: 5px;
}

<div class="gb-top-border">
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top pad"></div>
  <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top pad"></div>
  <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top pad"></div>
</div>
<br>

<div class="gb-top-border">
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top"></div>
  <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top"></div>
  <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top"></div>
</div>

Here is a live demo showing the flexbox with padding and without: https://codepen.io/ScottMastro/pen/mdpmwEy

I think this might be just an unavoidable feature of firefox so I've given thought to workarounds. If I can horizontally stretch the second and fourth segments of the image slightly beyond the boundary of their div containers, it will prevent a seam. I have not been able to come up with CSS capable of doing this.

I think you should [file a bug on bugzilla](https://bugzilla.mozilla.org/enter_bug.cgi#h=bugForm%7CFirefox) — the Hutt, Apr 14 '22 at 15:20
**duplicate:** https://stackoverflow.com/questions/64695988/svgs-in-a-css-grid-with-0px-gap-displays-background-color — Danny '365CSI' Engelman, Apr 14 '22 at 18:42
Thank you for the related questions. It doesn't seem that the answers offered for either question solve my issue here however. Maybe the ideal solution is to take it up with mozilla directly, as suggested. — ScottMastro, Apr 14 '22 at 19:51

score 2 · Accepted Answer · answered Apr 17 '22 at 17:11

I used background images instead of img tags, and added some margins, so that there are no white seams even at different zoom levels. However, at some zoom levels, the top border of the dark brown areas may look slightly different in the stretchy parts than in the fixed-width parts.

.gb-top-border {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
}

.gb-top-border-column-flex-1 {
  flex: 10 10 auto;
  display: flex;
}

.gb-top-border-column-flex-2 {
  flex: 5 5 auto;
  display: flex;
  min-width: 0;
}

.gb-img-vfill {
  width: 100%;
  max-height: 100px;
}

.gb-img-top {
  max-height: 100px;
}

.pad {
  padding: 5px;
}

<div class="gb-top-border">
    <div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/feD.svg'); height: 100px; width:123px; background-repeat: no-repeat; background-size: auto 102px"></div>
    <div class="gb-top-border-column-flex-1" style="background-image:url('https://svgshare.com/i/fge.svg'); height: 100px; margin-left:-1px ; background-size: 7px 102px"></div>
    <div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/fgL.svg'); height: 100px; width:224px; background-position: -3px 0; margin-right: -3px; background-repeat: no-repeat;background-size: auto 102px"></div>
    <div class="gb-top-border-column-flex-2" style="background-image:url('https://svgshare.com/i/fge.svg'); height: 100px; margin-left:-3px; margin-right: -3px; background-size: 7px 102px"></div> 
    <div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/fff.svg'); height: 100px; width:59px; background-position: -3px 0; background-repeat: no-repeat; background-size: auto 102px"></div>
</div>
<br>

qrsngky · Answer 2 · 2022-03-28T16:51:39.637

The dimensions of your SVG images are not integers, so there will very likely be rounding issues during rendering. But then, even if they were, at some irregular zoom levels, there might be rounding issues, too.

I manage to hide the seams for 100% zoom using Firefox, but not all different levels of zooms.

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
  margin: 0 -3px;
}

And after zooming out and going back to 100% there may be seams again.

I suspect that using background-images on the <div>s may be easier for this use case than managing tags (you can more easily 'cut off' the non-integer parts of background images than those of ).

score 0 · Answer 3 · answered Apr 13 '22 at 07:01

I have added some styles to the inner img of the 2 flexible segments.

Using this technique, even the case with padding can be made to merge. (I have set the dimensions bigger then needed to cover this case, in the normal case the dimensions can be lower).

.gb-top-border{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
}

.gb-top-border-column-flex-1 {
  flex: 10 10 auto;
  display: flex;
}

.gb-top-border-column-flex-2 {
  flex: 5 5 auto;
  display: flex;
  min-width: 0;
}

.gb-img-vfill {
  width: 100%;
  max-height: 100px;
}
.gb-img-top {
  max-height: 100px;
}
.pad {
  padding: 1px;
}

/* added */
.gb-top-border-column-flex-1 img,
.gb-top-border-column-flex-2 img {
    margin-left: -5px;
    margin-right: -5px;
    width: calc(100% + 10px);
}

<div class="gb-top-border">
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top pad"></div>
    <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top pad"></div>
    <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div> 
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top pad"></div>
</div>
<br>

<div class="gb-top-border">
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top"></div>
    <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div>
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top"></div>
    <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div> 
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top"></div>
</div>

I'm still seeing the seams with your solution, although it does seem to be an improvment — ScottMastro, Apr 13 '22 at 20:04

Seam forming between adjacent SVG images in flexbox

3 Answers3

Linked