1900111 - Game covers have aliasing on epic games store storefront

Status: NEW

(Core :: Graphics: ImageLib, defect)

Description

[soredake]

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

Steps to reproduce:

Loaded epic games store site, scrolled to game covers, and I see visible aliasing on game covers

Actual results:

Game covers have visible aliasing

Expected results:

Game covers should be smooth, as in microsoft edge

Comment 1

[soredake]

Attachment: firefox aliased game covers

Comment 2

[soredake]

Attachment: edge smooth game covers

Comment 3

[Dana Lucaci, Desktop QA]

Hello! I reproduce the issue with Firefox 128.0a1 (2024-05-31) on Windows 10. Marking issue as new for engineering input.
Thank you!

Comment 4

[Dana Lucaci, Desktop QA]

Moving the Component to ‘General’ . Please change if there’a better fit, thank you.

Comment 5

[:Gijs (he/him)]

Attachment: Screenshot from 129 beta on Windows 11

I can't reproduce this - the images look sharp to me.

Comment 6

[Rob Wu [:robwu]]

The website is: https://store.epicgames.com/

Reporter & Dana:
Could you share the output of about:support? We're specifically interested in the "Window Device Pixel Ratios" section (and whether resist fingerprinting is on).

In Gijs's case it is all 1.5 (screenshot in comment 5).

Comment 7

[:Gijs (he/him)]

Attachment: With resistfingerprinting

With resist fingerprinting turned on on current nightly (130a1), I can reproduce. Toggling image-rendering: crisp-edges (which the site has added to their images; turning it off improves matters) in the devtools console "fixes" the issue.

Comment 8

[:Gijs (he/him)]

At least tentatively this looks like an image rendering type issue (though it may be a site issue or fingerprinting issue, depending on what we hear from the reporter and Dana)

Comment 9

[Timothy Nikkel (:tnikkel)]

I am pretty sure there was another bug filed recently on a very similar issue (image-rendering: crisp-edges being used for covers of games on a store) but I can't find it now.

With "image-rendering: crisp-edges" this is the rendering the website is asking for no? Is there another type of scaling algorithm we are supposed to be using? Is Chrome just ignoring that?

Comment 10

[soredake]

(In reply to Rob Wu [:robwu] from comment #6)

The website is: https://store.epicgames.com/

Reporter & Dana:
Could you share the output of about:support? We're specifically interested in the "Window Device Pixel Ratios" section (and whether resist fingerprinting is on).

In Gijs's case it is all 1.5 (screenshot in comment 5).

Mine is all 1, same problem exists with latest nightly (130.0a1 (2024-07-18))

Comment 11

[:Gijs (he/him)]

(In reply to Timothy Nikkel (:tnikkel) from comment #9)

I am pretty sure there was another bug filed recently on a very similar issue (image-rendering: crisp-edges being used for covers of games on a store) but I can't find it now.

With "image-rendering: crisp-edges" this is the rendering the website is asking for no? Is there another type of scaling algorithm we are supposed to be using? Is Chrome just ignoring that?

I see a difference in rendering with and without resistfingerprint. Without resistfingerprinting, I don't need to disable the crisp-edges bit to make it look "nice".

(In reply to soredake from comment #10)

Mine is all 1, same problem exists with latest nightly (130.0a1 (2024-07-18))

Thank you. Can you also clarify if in about:config the value for privacy.resistFingerprinting is true or false?

Comment 12

[soredake]

(In reply to :Gijs (he/him) from comment #11)

Mine is all 1, same problem exists with latest nightly (130.0a1 (2024-07-18))

Thank you. Can you also clarify if in about:config the value for privacy.resistFingerprinting is true or false?

privacy.resistFingerprinting set to false (default)

Comment 13

[Timothy Nikkel (:tnikkel)]

(In reply to :Gijs (he/him) from comment #11)

(In reply to Timothy Nikkel (:tnikkel) from comment #9)

I am pretty sure there was another bug filed recently on a very similar issue (image-rendering: crisp-edges being used for covers of games on a store) but I can't find it now.

With "image-rendering: crisp-edges" this is the rendering the website is asking for no? Is there another type of scaling algorithm we are supposed to be using? Is Chrome just ignoring that?

I see a difference in rendering with and without resistfingerprint. Without resistfingerprinting, I don't need to disable the crisp-edges bit to make it look "nice".

I can see the jagged rendering without resistfingerprint.

Comment 15

[soredake]

https://myanimelist.net/anime/59978/Sousou_no_Frieren_2nd_Season

Same problem on this page with character's pictures.

Comment 16

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

The severity field is not set for this bug.
:tnikkel, could you have a look please?

For more information, please visit BugBot documentation.