CODEWITHSUNDEEP
htmlcsssvgfirefoxflexbox
ScottMastro
ScottMastro

Reputation: 330

Seam forming between adjacent SVG images in flexbox

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:

enter image description here

.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.

Upvotes: 2

Views: 361

Answers (3)

qrsngky
qrsngky

Reputation: 2916

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>

Upvotes: 2

vals
vals

Reputation: 64194

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>

Upvotes: 0

qrsngky
qrsngky

Reputation: 2916

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 ).

Upvotes: 1

Related Questions