Using a full page SVG with an internal repeating pattern seems to scale the most smoothly





    html, body {  margin: 0; }
    svg { position: absolute; }



    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  
      <pattern id="p1" width="10" height="10" patternUnits="userSpaceOnUse"  >
        <polygon points="0,0 5,5 10,0 10,5 5,10, 0,5" fill="#ECEDDC" /> 
      </pattern>
     
      <rect width="100%" height="100%" fill="#29AB87"  />
      <rect width="100%" height="100%" fill="url(#p1)" />
    </svg>

On a repeated background, the edges of the repeated tiles don't align exactly on certain zoom levels. This leads to unwanted edges as the color of the background is visible in this 1px gap.

I've done some background reading and understand this is probably due to a rounding error on decimal pixel values due to the zooming. Adjusting the size of the background tile by a couple of pixels removes the issue at one zoom level (as the scaled image dimension are then integer values), but obviously breaks other zoom values.

Slightly overlapping the background tiles might work, but I'm not sure how this can be achieved with a repeated background . Disabling zoom is another option, but I would like to prevent this if possible.

Code as shown below shows the problem in Chrome when setting the zoom to 85% (or even worse on 63%):





    #header {
      background: linear-gradient(135deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0,
                  linear-gradient(225deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0,
                  linear-gradient(315deg, #ECEDDC 24.9%, transparent 25.1%),
                  linear-gradient(45deg, #ECEDDC 24.9%, transparent 25.1%);
      background-size: 140px 140px;
      background-color: #29AB87;
      width: 100vw;
      height: 100vh;
    }



    <div id="header"></div>



Screenshot of the issue:

[![enter image description here][1]][1]


   [1]: https://i.stack.imgur.com/ADs13.png