[Broken Website] Some icons on Office website is broken after redesign

DeFaLT-dj commented 1 year ago

Prerequisites

[X] I searched for any existing report about this website issue to avoid opening a duplicate.
[X] I can reproduce this website issue in a new, unmodified web browser profile with Dark Reader installed as the only extension.

Website Issue Description

So, Office just got a redesign, and it broke some icons. Old solution for one of the broken pages is no longer working as well. Old solution was:

================================

office.com

INVERT
.ms-ohp-svg-Icon.ms-ohp-Icon--privacyLogo

IGNORE IMAGE ANALYSIS
.ms-ohp-svg-Icon.ms-ohp-Icon--privacyLogo
.ms-ohp-svg-Icon.ms-ohp-Icon--calendarLogo::before
.ms-ohp-svg-Icon.ms-ohp-Icon--flowLogo::before

================================

But after the redesign, even with this solution active, icons look like they were before:

Also, icons at the left sidebar appear black instead of orange. They appear orange when the page is still loading but when page completes loading, they become dark again.

While page is downloading:

After page fully loads:

Some icons have issues in the menu at the top left corner with 9 dots, but I guess that part of the web page can't be edited? Just leaving it here in case something can be done.

Website Address

office.com or microsoft365.com

Steps To Reproduce

visit www.office.com/apps
activate extension

Screenshots

Operating System

Windows 11

Web Browser name and version

Microsoft Edge Version 108.0.1462.54 (Official build) (64-bit)

Dark Reader version

4.9.60

Additional Context

No response

Gusted commented 1 year ago

Hi @DeFaLT-dj,

Could you try the following fix and see if this fixes the calendar icon:

================================

office.com

IGNORE IMAGE ANALYSIS
.ms-svg-Icon.ms-Icon--Calendar::before

================================

DeFaLT-dj commented 1 year ago

Hi @DeFaLT-dj,

Could you try the following fix and see if this fixes the calendar icon:
================================

office.com

IGNORE IMAGE ANALYSIS
.ms-svg-Icon.ms-Icon--Calendar::before

================================

Hello, thanks it worked! You probably figured it out, but the same method worked for other icons as well. Here is the fix for all others.

================================

office.com

INVERT
.ms-ohp-svg-Icon.ms-ohp-Icon--privacyLogo
.ms-svg-Icon.ms-Icon--MSNLogo

IGNORE IMAGE ANALYSIS
.ms-ohp-svg-Icon.ms-ohp-Icon--privacyLogo
.ms-svg-Icon.ms-Icon--Calendar::before
.ms-svg-Icon.ms-Icon--MicrosoftFlowLogo::before
.ms-svg-Icon.ms-Icon--MSNLogo::before

================================

Unfortunately, I couldn't figure out the issue with sidebar icons. Please let me know if you find a fix for this one as well

DeFaLT-dj commented 1 year ago

Hi @DeFaLT-dj,

Could you try the following fix and see if this fixes the calendar icon:
================================

office.com

IGNORE IMAGE ANALYSIS
.ms-svg-Icon.ms-Icon--Calendar::before

================================

Hello, thanks it worked! You probably figured it out, but the same method worked for other icons as well. Here is the fix for all others.

================================

office.com

INVERT
.ms-ohp-svg-Icon.ms-ohp-Icon--privacyLogo
.ms-svg-Icon.ms-Icon--MSNLogo

IGNORE IMAGE ANALYSIS
.ms-ohp-svg-Icon.ms-ohp-Icon--privacyLogo
.ms-svg-Icon.ms-Icon--Calendar::before
.ms-svg-Icon.ms-Icon--MicrosoftFlowLogo::before
.ms-svg-Icon.ms-Icon--MSNLogo::before

================================

Unfortunately, I couldn't figure out the issue with sidebar icons

EDIT: So, disabling inline file through dev tools fixes the issue but as expected it is not permanent solution since refreshing page will change it back. I couldn't figure out how to disable it specifically for this website only

DeFaLT-dj commented 1 year ago

It got even worse with last update

darkreader / darkreader