Colors of images on web page are inverted in Night Mode.

[SimonBasca]

Logged via : https://bugzilla.mozilla.org/show_bug.cgi?id=1598318

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

Go to:
http://www.cnn.com/

Actual results:

Many images on the web page are inverted. For example:

• The CNN logo • Background color for notification at top. • Dot indicator showing Live content. • Color of 'i' in Politics heading

Expected results:

Correct colors of images are shown in night mode.

┆Issue is synchronized with this Jira Task

[shengchl]

Also related: Firefox does not check whether the website is already in dark mode and reverses it to light. e.g. DuckDuckGo.com (auto dark them on iOS reverses to light in Firefox), swiftwithmajid.com.

[alexlitovsky]

Are there any plans for fixing this? It's been 3 years. It's been reported over and over again with seemingly no progress. Really a deal-breaker for using FF on iOS.

[Bluewombat5]

Wondering why this is still outstanding. Strongly considering dropping FF iOS as this is a daily irritation. Only think preventing an immediate switch is desire to sync tabs across devices

[nbhasin2]

Hi, in case someone is having an issue around this please keep in mind that the scripts related to JS / CSS need to be updated to support websites which already have dark themes.

The current implementation will revert the colours and does not account for the fact that an image or the website might already have a dark mode.

If you do find yourself in a situation where night mode isn't working well for you please turn it off like below.

NOTE: Your Firefox iOS dark them in the settings won't be affected as Night Mode from the hamburger menu is not related to the Firefox iOS dark / light theme.

[Stryill]

I'm wondering why this issue hasn't been resolved yet. I'm seriously thinking about discontinuing the use of FF iOS because this irritation happens daily. The only thing holding me back from switching right away is my desire to sync tabs across devices.

[phy2000]

Other browsers can handle this correctly. Why is Firefox still broken more than 4 years after the first reports?

[aesuan]

Please someone address this. Daily frustration. Could we at least just blanket not invert img elements as an interim fix? Surely that would be less annoying than the current status

[data-sync-user]

➤ Matt Reagan commented:

Nishant Bhasin Norberto Andres Furlan Any thoughts on whether skipping img and video elements in the NightMode script would be a reasonable solution to this? Wondering if the benefits of skipping them outweighs the issues that can result with inverting.

[nbhasin2]

@mattreaganmozilla that could be an interim option

@issammani thoughts around this before we add any other scripting support?

[issammani]

@mattreaganmozilla that could be an interim option

@issammani thoughts around this before we add any other scripting support?

This is already happening. We invert the whole page and then invert <img>, <video> and <iframe> tags a second time, essentially inverting them back to the original appearence. The items mentioned in the description:

• The CNN logo • Background color for notification at top. • Dot indicator showing Live content. • Color of 'i' in Politics heading

use the <svg> element. In theory, we can invert them back as well, but this also has drawbacks. Iconography usually uses inline <svg> elements instead of loading them via <img> elements. In some cases, when we invert colors we will have a low contrast ratio between the <svg> and the background. But I think that's less of an annoyance than having inverted logos and illustrations...

If we want this, the fix is pretty easy. We can just add svg to this line: https://github.com/mozilla-mobile/firefox-ios/blob/4bf735688eece278bc2c24db248724e0ce33bd2d/firefox-ios/Client/Frontend/UserContent/UserScripts/MainFrame/AtDocumentStart/NightModeHelper.js#L21