1876624 - Firefox background CSS repetitive image pattern show image edges

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect, P3)

Description

[Ogniolis]

Attachment: Zrzut ekranu 2024-01-25 222253.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Steps to reproduce:

.desktop-background {
height:100%;
background-image: url('/assets/background32.png');
background-repeat: repeat;
}

Actual results:

I'm working on a webpage where the background is a black-white checker with squares 1px by 1px. I was trying different CSS background I found on the internet but Firefox didn't display it correctly (Full screen Firefox, 2560x1440). The background was shown with visible crack in the pattern through whole width of the screen. So I decided I will stay away from CSS gradients and go with old method. Simple GIF image 10x10px with checker in it, repeated. Again, Chrome displays it correctly, but Firefox shows something like this (please zoom it).
What I can do to fix this? I tried different background-blend-modes to no avail, I have no other ideas. Ah and it's React, so I tried .local.env variable to disable inlining images lesser that 10kB, this did not help either.

Expected results:

The background is repetitive without any visible lines of images contact

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Alice0775 White]

Ogniolis,
Could you provide a testcase or public url to reproduce the problem?

Comment 3

[Ogniolis]

Public URL https://gitowiec.github.io/atari-commander-home-page/

Comment 4

[Nicolas Silva [:nical]]

The artifact comes from clamping uv coordinates at the edges of the source image when not rendering a scaled image. To get rid of the artifact we'd need to either perform the filtering ourselves (sample four times, with the repetition applied to each sample and then average), or pre-pad the source image with contents from the other side (and no longer clamp the uvs).

This type of content (a high-contrast checkerboard pattern with a pixel-sized features) is what highlights the sampling artifact from clamping UVs the most though.

What I can do to fix this?

I suspect that for the effect you are trying to achieve, image-rendering: crisp-edges has the advanatge of removing the blurriness from filtering, although at different non-ineteger scale factors it will cause moire-like effects (which you would have to fix by ensuring that the displayed size in pixel for each repetition is a whole number of times the image size).

Comment 5

[Ogniolis]

image-rendering:crisp-edges gives me this bad result, see file:Zrzut ekranu 2024-02-06 130416.png

Comment 6

[Ogniolis]

Attachment: Zrzut ekranu 2024-02-06 130416.png

Comment 7

[Ogniolis]

Attachment: Zrzut ekranu 2024-02-06 130659.png