1878616 - 1x1px background image isn't consistent to other browsers

Status: UNCONFIRMED

(Core :: Graphics, defect)

Description

[Kolja Lampe]

Steps to reproduce:

I took a logo and made it 1px width and 1px height.

https://github.com/flathub-infra/website/blob/36704336e77f014464d8a638640928173b297ad7/frontend/src/components/application/AppOfTheDay.tsx#L22

Actual results:

It seems like the icon get's resized and shows in one pixel, so I end up with a bunch of very very small icons in a grid.

Expected results:

All other browsers including firefox seem to average the colors in the image and just show the one pixel with that average color.

This seems to work in chromium, firefox and webkit.

Comment 1

[Kolja Lampe]

Here's a repro in codesandbox

https://codesandbox.io/p/sandbox/green-bush-glc7xp?file=%2Fsrc%2FApp.tsx%3A8%2C7&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls8t5x800006206aktwey76g%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls8t5x800002206ay68wzdjm%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls8t5x800003206a8ccvzq4s%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls8t5x800005206a95zb2dye%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls8t5x800002206ay68wzdjm%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls8t5x7z0001206aclldmvvr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpublic%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A5%252C%2522startColumn%2522%253A2%252C%2522endLineNumber%2522%253A23%252C%2522endColumn%2522%253A26%257D%255D%257D%252C%257B%2522id%2522%253A%2522cls8tha8h00022069450p9i6a%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A8%252C%2522startColumn%2522%253A7%252C%2522endLineNumber%2522%253A8%252C%2522endColumn%2522%253A7%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cls8t5x800002206ay68wzdjm%2522%252C%2522activeTabId%2522%253A%2522cls8tha8h00022069450p9i6a%2522%257D%252C%2522cls8t5x800005206a95zb2dye%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls8t5x800004206a2htg8qef%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cls8t5x800005206a95zb2dye%2522%252C%2522activeTabId%2522%253A%2522cls8t5x800004206a2htg8qef%2522%257D%252C%2522cls8t5x800003206a8ccvzq4s%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cls8t5x800003206a8ccvzq4s%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Comment 2

[Kolja Lampe]

Here's a more minimal version, in theory you can remove the border, but you might not see the element then.

<html>
<body>
<style>
.root {
background-image: url("org.mozilla.firefox.png");
background-size: 1px 1px;
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
<div class="root"></div>
</body>
</html>

You will also need the image in the same folder

Comment 3

[Robert Mader [:rmader]]

Jamie, is this maybe something you could help with? Sorry for the noise, it's just a bit unfortunate as it apparently affects a new design role-out for https://flathub.org/ (even though I guess it should be possible to work around it) :/

Comment 4

[Jamie Nicol [:jnicol]]

Could you please attach screenshots of what it's supposed to look like and what it actually looks like? I think I see your "expected results" (solid colour) when at the default zoom on Firefox on Android, Firefox on Macos, and Chrome on Macos. And see your "actual results" (lots of icons) on Chrome on Android. In all browsers on all platforms I see lots of icons once zoomed in.

What device are you testing this on? Could you please attach the about:support information to the bug. Thanks!

Comment 5

[Kolja Lampe]

Attachment: image2.png

Comment 6

[Kolja Lampe]

Attachment: Screenshot from 2024-02-13 12-32-44.png

Comment 7

[Kolja Lampe]

Attachment: about:support

Comment 8

[Kolja Lampe]

Attachment: about:support

Comment 9

[Kolja Lampe]

Attachment: about

Comment 10

[Kolja Lampe]

Sorry, the upload was erroring and didn't show in the issue.

I think you are unfortunately right about the zoom level affecting this - meaning I can reproduce that with firefox

Just in case
about:device
https://paste.kodi.tv/gorovutoje

Comment 11

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

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

For more information, please visit BugBot documentation.

Comment 12

[Jeff Boek [:boek]]

This looks like the behavior is the same between Android and Desktop, Android loads with a different zoom level which makes it look different initially. Is this a bug?

Comment 13

[Kolja Lampe]

(In reply to Jeff Boek [:boek] from comment #12)

This looks like the behavior is the same between Android and Desktop, Android loads with a different zoom level which makes it look different initially. Is this a bug?

Yes, but take it with a grain of salt, when creating the original issue, I was not aware, how zoom levels affect this, even in different browsers. There is also a webkit bug related to this, but it's slightly worse on that engine.