1749417 - transparent img (image) style background imagedoc-lightnoise.png OR imagedoc-darknoise.png

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Michael J Evans]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0

Steps to reproduce:

Set any user preference background and/or Dark Reader addon.

Load any transparent image (E.G. a PNG with an alpha channel)

Actual results:

The image is displayed but has a background behind it which ALTERS the expected user viewing behavior. In my case this style rule is added.

img.transparent {
background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
color: #222;
}

This is bad across several dimensions:

1. It is the default and causes negative viewing experiences for users who are inexperienced. I was never asked as a user if I needed or even wanted a different background or if the image was tough to see / not displayed as expected.

2. There is no toggle for this behavior (on the page, nor anywhere else that I can see.)

Expected results:

Expected minimum behavior:

Firefox display the image as intended, with transparency on top of the default background.

Expected 'actually smart' behavior:

A visible control to toggle background behavior on direct image file loads. (default background theme, #000, #fff, a large checkerboard similar to image editing programs to suggest where the transparency is... etc. )

Bonus: buttons to control fit to window height / width / zoom.

I consider the CURRENT behavior a bug, since it does not display content as intended by websites. REMOVING the existing styling choice and doing LESS is a valid resolution.

It would be a Feature Enhancement to be 'actually smart' and work WITH the user, to empower them to have a better experience, rather than fighting the user with static settings that make less sense than doing nothing.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Jon Bauman [:jbauman:]]

I'm not sure if this is more of a Layout or a DOM issue, but I don't think it's A/V: Playback

Comment 3

[Negritas Sergiu, Desktop QA]

Hello!

I have tried to reproduce the issue with firefox 98.0a1(2022-01-14) unfortunately I haven't managed to reproduce the issue with Ubuntu 20.04.
Could you please answer the following questions in order for us to investigate it further:

1. Does this issue happen with a new profile? Here is a link on how to create one: https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles
2. Does this issue happen in the latest nightly? Here is a link from where you can download it: https://www.mozilla.org/en-US/firefox/channel/desktop/
3. Do you have any addons installed if so can you list them?
4. Could you please attach a website where you have encountered the issue?

Comment 4

[Michael J Evans]

I have prepared a simple test case and hereby also declare the data of the test case to be too obvious / basic for copyright to apply. In case that is insufficient I also offer a license to that data in CC0 (Any version of the Creative Commons 0 license that exists or is later created). If the test case is valuable please cache a copy of the data locally.

Action Item 4: I have created some tests cases.

https://mproj.net/TestLogoTransparency_Dark.png
https://mproj.net/TestLogoTransparency_Light.png
https://mproj.net/TestLogoTransparency.xcf

Action Item 1: New blank profile (current installed version, Arch Linux)

Note: ArchLinux has updated to Firefox 96.0 since this bug was reported.

https://mproj.net/TestLogoTransparency_Dark.png
[18/Jan/2022:14:54:30 -0800] "GET /TestLogoTransparency_Dark.png HTTP/1.1" 200 3119 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:96.0) Gecko/20100101 Firefox/96.0"

FAIL: Displays with undesired background behind the transparent PNG.

Right click Inspect:
element {
}

(from) TopLevelImageDocument.css:13 @not print

img.transparent {
background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
color: #222;
}
img {
image-orientation: from-image;
}
img {
text-align: center;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
img {
display: block;
}
body {
color: #eee;
}

Action Item 3:

Invalid, the problem is reproducible in a new profile with ZERO addons / extensions.
Possibly related: my system theme IS set to dark mode, but irrespective of mode, any addition behind the transparent CSS image causes undesired and currently uncorrectable behavior that is not obvious it is something the browser adds.

Action Item 2:

firefox-nightly installed from ArchLinux AUR (after importing pacman-key -r 0x61B7B526D98F0353)

Results appear identical to the Firefox 96 test, inspect too (at a glance, the problem background is present).
[18/Jan/2022:15:20:30 -0800] "GET /TestLogoTransparency_Dark.png HTTP/1.1" 200 3119 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:100.0) Gecko/20100101 Firefox/100.0"

Comment 5

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

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

For more information, please visit auto_nag documentation.

Comment 6

[Jonathan Watt [:jwatt]]

(In reply to Michael J Evans from comment #0)

img.transparent {
background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
color: #222;
}

This CSS sets the 'background' property explicitly to give the <img> a non-transparent, grey background. Doesn't Chrome etc. behave in exactly the same way.

You can also see this without using an <img>:

data:text/html,<style>h1 { background: hsl(0,0%,90%); } </style><h1>This has a background

Comment 7

[Michael J Evans]

Inspecting a recent version of chrome, a similar un-feature is also injected; Chrome uses a CSS style similar to "background-color: hsl(0, 0%, 90%)".

However, doing the same thing as another popular browser doesn't mean it's been done right. I probably should go file a bug against Chrome too because it's still wrong for the end users and even more wrong for anyone creating an image since they can't rely on transparent images displaying with fidelity when loaded directly.

[Bug Fix] Expected minimum behavior:

Display the image as intended (by the creator of the image) , with transparency on top of the default background. (no extra client-side added background layers.)

[Enhancement] 'actually smart' behavior:

Empower the end user by adding controls. E.G. a background selector (default, light, dark, user specified CSS / template page / image) for the page around the image, maybe even window-fit controls (fit all, width, height).

Comment 8

[Jonathan Watt [:jwatt]]

You didn't comment on my data: URL example above, and there's too much ambiguity otherwise for me to tell what you're taking issue with. Please use the 'Attach New File' button above to provide a minimal, uncomplicated testcase so that we can discuss things in concrete terms.

Comment 9

[Michael J Evans]

Attachment: Simple PNG image with alpha channel transparency, transparency should equal window background if viewed directly

Simple PNG image 1 with alpha channel transparency. The default should be, transparency equals window background if viewed directly.

The large transparent border area around this image should NOT have a fill behind it other than whatever the page background is.

That's the bug, the enhancement repair allows the browser to dynamically do fancy things that the end user might want, such as changing the background for the whole generated page the image is viewed on in the browser.

Comment 10

[Michael J Evans]

Attachment: Simple PNG image with alpha channel transparency, transparency should equal window background if viewed directly

Simple PNG image 2 with alpha channel transparency. The default should be, transparency equals window background if viewed directly.

The large transparent border area around this image should NOT have a fill behind it other than whatever the page background is.

That's the bug, the enhancement repair allows the browser to dynamically do fancy things that the end user might want, such as changing the background for the whole generated page the image is viewed on in the browser.

Comment 11

[Michael J Evans]

Attachment: GNU Image Manipulation Program source file for generating the PNG test cases.

GNU Image Manipulation Program source file for generating the PNG test cases.