Skip to content

Conversation

@hazzuk
Copy link
Contributor

@hazzuk hazzuk commented Apr 19, 2024

hazzuk added 3 commits April 19, 2024 22:32
Fixes SVG elements on Future-brand sites, includes mostly site logo's and some other icons.
#slice-container-subBrandsBar > div > a > span > svg > path:nth-child(2)

IGNORE INLINE STYLE
.site-logo svg *
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's try solving it a bit differently. Let's try putting something like

*
IGNORE INLINE STYLE
svg[role="img"] path
svg[role="img"] g
svg[role="img"] rect
svg[role="img"] circle
// Maybe 'svg[role="img"] *' will work, but not sure about performance

and the other fixes should be just INVERT when necessary.

@alexanderby
Copy link
Member

Please stick to my proposal, or hold on, as far as I've got some ideas on improving the SVG analysis. The list of the websites and the wrong elements is very useful for testing, thank you.

@alexanderby
Copy link
Member

I made a fix for SVG logos. Seems working mostly fine (except of iMore, where the logo styles come from different sources). The fix should be available next week.

@alexanderby
Copy link
Member

alexanderby commented May 1, 2024

Version 4.9.84 is available, please check it out.

UPD: false start, I guess in's a holiday in Germany and Mozilla is not ready to review it yet.

@hazzuk
Copy link
Contributor Author

hazzuk commented May 1, 2024

I'm on Chromium so was able to test the changes in 4.9.84.

Blue text

As previously discussed in #12613, re-tested and the issue with blue text has been fixed ✅

SVG Logo's

90% of these site logo's now have the correct invert. But every logo whilst loading flashes as at first they're not inverted, causing a distracting change once loaded.

Recording.2024-05-02.001358.mp4

This wasn't the case with my original fixes, which worked by not targeting the SVG directly, instead it's sub elements. Either with a wildcard or the name of the SVG elements.

Recording.2024-05-02.001757.mp4

Remaining logo invert issues with:

Also, https://www.imore.com but that's just impossible to invert correctly. Instead, probably still need to use the kind of manual changes I made specifically for this one, might be best if it ends up in another pr.
image

Other SVG logo's

These websites have sub-brand sites, and use their logo's in the navigation, still an issue.

SVG social icons

All of the sites still have an issue with the twitter/X share icon:
image


@alexanderby Let me know if you want to try and fix any of these issues at the app level again. Otherwise I can try targeted fixes.

@alexanderby
Copy link
Member

Thanks for noticing the blink, I made a fix. I will think what to do with other isues.

@hazzuk
Copy link
Contributor Author

hazzuk commented Nov 19, 2025

I'm going to close this PR since it's been open a long time without movement; I feel someone else would be better placed to tackle the original issue if they'd like to see it fixed.

@hazzuk hazzuk closed this Nov 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants