Why can't html just render boxes with backgrounds next to each other without lines in between at some zoom levels 🙄

because using SDFs for rasterization would be pointless in 99.99% of cases.
Just use a canvas or something

Was gonna say "Go use a canvas", but was beaten to it.

@localpost Ah what is SDF's? :O

Cheers !

Yeah I like to flexibility of html/css styling for these things :/

@lopu signed distance fields/functions, a mathematical way of describing what is and isn't part of a shape.

The lines between the squares come from half-pixel edges not adding up in the way you expect because the divs are rasterized one after another, always letting a little bit of the background shine through.

SDFs would be one way to "join the shapes together" to get rid of the gaps before rendering but you probably won't see that used in a browser.

If you insist on drawing pixels using the DOM, at least use SVG elements

@localpost

I tried it even with SVG's and using a series of rect's I still get the background showing through between the squares at varying zoom levels..

I'm thinking of watching the zoom level and adjusting the pixel widths to match the zoom and DPI level so they're always even.. o.O