Seam forming between adjacent SVG images in flexbox-CodePudding

The

HTML:

<div > <div > <img src="https://svgshare.com/i/feD.svg" > </div> <div > <img src="https://svgshare.com/i/fge.svg" > </div> <div > <img src="https://svgshare.com/i/fgL.svg" > </div> <div > <img src="https://svgshare.com/i/fge.svg" > </div> <div > <img src="https://svgshare.com/i/fff.svg" ></div> </div>

CSS:

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

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.

CodePudding user response：

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

CodePudding user response：

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 > <div ><img src="https://svgshare.com/i/feD.svg" ></div> <div ><img src="https://svgshare.com/i/fge.svg" ></div> <div ><img src="https://svgshare.com/i/fgL.svg" ></div> <div ><img src="https://svgshare.com/i/fge.svg" ></div> <div ><img src="https://svgshare.com/i/fff.svg" ></div> </div> <br> <div > <div ><img src="https://svgshare.com/i/feD.svg" ></div> <div ><img src="https://svgshare.com/i/fge.svg" ></div> <div ><img src="https://svgshare.com/i/fgL.svg" ></div> <div ><img src="https://svgshare.com/i/fge.svg" ></div> <div ><img src="https://svgshare.com/i/fff.svg" ></div> </div>