Odd vertical lines appearing in site design due to css issue

General
1

I have a little svg that is repeating so that it creates a wavy line horizontally across the page. My issue is there is some very little blueish vertical lines appearing across the page (in the purple wavy row) and I can not figure out how to fix it. They also dont appear in Google Chrome browser seems like only Firefox and Safari they appear in.

See the sandbox site here: https://kb8sdmuemsdubwmq-70451560692.shopifypreview.com and below the attached image to see what I mean. Does anyone know how to resolve it?

image
image1530×144 31.3 KB

2

The thin vertical blueish lines you’re seeing in Firefox and Safari, but not in Chrome, are a common rendering artifact that happens when:

  1. An SVG is tiled/repeated using background-repeat.
  2. The SVG has fractional pixel dimensions or blurry edges.
  3. Different browsers handle subpixel anti-aliasing and image scaling differently.

Likely Cause

Your SVG probably contains semi-transparent or anti-aliased edges that do not tile perfectly edge-to-edge, causing visible seams when repeated.

This is especially common with waves or curves that were exported from vector editors like Illustrator or Figma without pixel-perfect alignment.

How to Fix It

Option 1: Ensure Pixel-Perfect Tiling in the SVG

Open your SVG in a vector editor and:

  • Ensure the width of the wave path matches exactly the viewBox width.
  • Snap wave endpoints exactly to the edges (e.g., x=0 and x=viewBox width).
  • Remove any semi-transparent strokes or feathering near edges.

Then re-export.

Option 2: Use background-size to match exact tile size

If your SVG background is repeated like this:

background-image: url('wave.svg');
background-repeat: repeat-x;

Add:

background-size: contain; /* or */
background-size: 100px 100px; /* Match the exact SVG dimensions */

Try tweaking it until it avoids subpixel scaling.

Option 3: Use inline SVG instead of background image

If possible, inline the SVG directly into your HTML and use preserveAspectRatio="none":

<svg viewBox="0 0 100 10" preserveAspectRatio="none" ...>
  <path d="..." />
</svg>

This avoids tiling artifacts altogether and gives you better control.

Option 4: Apply slight background-blending or mask

As a hacky fix, you can try:

background-blend-mode: multiply;

Or layer a semi-opaque purple div over the wave to “hide” the seams.