Broken graphics on Blink browsers

[SilentImp]

Describe the bug

It seems that icons and some other elements somehow broken in brave.
There are spacing between "pixels" in the icons.

To Reproduce

1. Got to 'https://nostalgic-css.github.io/NES.css/' in the Brave browser
2. Icons look broken

Expected behavior

Icon without white spacing between "pixels"

Screenshots

Brave (incorrect)

Chrome Canary (incorrect)

Firefox (correct)

Environment:

• OS: Version 1.73.91 Chromium: 131.0.6778.85 (Official Build) (64-bit)
• Browser: Version 1.73.91 Chromium: 131.0.6778.85 (Official Build) (64-bit)
• Build environment (i.e. NodeJS):

Suggestion(s) for fixing this issue

Additional context

[SilentImp]

Maybe related to #434
But

* {
    border-image-repeat: stretch !important;

    // for chrome
    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
      border-image-repeat: stretch  !important;
    }
  
    // for firefox
    @supports (-moz-appearance: meterbar) {
      border-image-repeat: stretch  !important;
    }
}

doesn't seem helping

[BScrivener]

Anyone have any luck fixing this?

For the most part it looks better in Firefox, but it's very 'gappy' in Edge. Not just the icons, but a lot of things.

[maomentai817]

When zooming in the browser, the floating-point offset value of the box-shadow fails to precisely align with the physical pixel grid after zooming, resulting in gaps in the rendering. It is caused jointly by sub-pixel positioning, pixel rounding error and the unsuitability of box-shadow itself for fine stitching rendering.

• Scaling causes the box-shadow offset value to become a non-integer, resulting in rounding errors.

• The rendering engine fails to align all the shadow edges, and there are gaps between the pixels.

• box-shadow is not designed for pixel-level graphics and is not suitable for fine graphic stitching.

based on this, I wrote a set of vue3 component libraries using css houdini paintWorklet, which solved this problem

you can find it here: https://github.com/maomentai817/pixel-ui