[Broken Website] Microsoft Outlook Web Application (OWA) missing buttons in compose email section

[timjobutler]

Broken Website Report

Website Address

https://mail.jwpub.org/owa

Steps To Reproduce

• Go to https://mail.jwpub.org/owa
• Either start a new email or reply to an existing email
• The row of buttons above the Send button is not visible when Dynamic mode is enabled. They appear once switching to Filter mode.
• This issue is present in Firefox, Chrome and Edge browsers.

Problematic Observation

The buttons in the compose email section, both new and replies, are missing in Dynamic mode but appear when switching to Filter mode. Interestingly, in the Chrome browser, once you have switched to Filter mode to access the buttons if you switch back to Dynamic mode, the buttons remain present. However, this behaviour only works in Chrome, not in Edge or Firefox.

Screenshots

Screenshot of the Compose email section when Dynamic mode is applied

Screenshot of the Compose email section when Filter mode is applied

System Information

Windows 10 Home, 64-bit, Build 19043 Chrome version 104.0.5112.102 Firefox version 103.0.2 Edge version 104.0.1293.63 Dark Reader version 4.9.57

Additional Context

This website is accessed using an organisational Microsoft Exchange account

[Gusted]

Adding help wanted as this seems to be an "internal" page.

[timjobutler]

I am happy to provide whatever technical data is needed since a work account is required to access this page

[Gusted]

When I add a help wanted label, I kind of expect for people with those access to investigate a bit for themselves (as remote debugging is time-consuming and can really lead to nothing as I don't know the whole context). You could investigate via the dev tools(ctrl + shift + i) if there's CSS that's causing this buttons to be not visible (if they are there in the first place).

[timjobutler]

@Gusted I am new to this side of the browser so I will try my best to provide the info.

UPDATE - this issue is only present in Firefox (version 104.0.1)

Screenshot of "Bold" button in Dynamic mode

Screenshot of "Bold" button in Filter mode

Screenshots of Developer Tools for the "Bold" button

Here is the CSS code for the "Bold" button as a sample OWA.txt

Here is the page source HTML file, not sure if it is helpful or not https __mail.jwpub.orgowa#path=_mail_drafts.txt

[Gusted]

Could you please make a screenshot with the <span class="_fc_3 owaimg csimg image-bold-png"> element being selected?

[timjobutler]

Hi @Gusted

Here is the screenshot of the <span class="_fc_3 owaimg csimg image-bold-png"> element selected.

[Gusted]

Thanks! Could you scroll down the element's style rules?

Somewhere in that list, there's likely a rule that's causing this. If you're not able to figure that out, please send a screenshot of all rule(the first 25 should be enough).

[timjobutler]

I believe these are the screenshots you are requesting.

[Gusted]

Interesting, seems to be correct. Could you try adding this custom fix to Dark Reader's devtools:

• Click Dark Reader icon.
• Click Dev tools (in the bottom-right corner).
• Add:

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

mail.jwpub.org/owa

IGNORE IMAGE ANALYSIS .image-bold-png

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

- Try to format this fix as the other fixes, don't just copy paste it. Dark Reader will automatically sort the fix alphabetically, just make sure it's according to current format.
- Click Apply

[timjobutler]

I have added the suggested fix in the Dev Tools and expanded it to include all the buttons that were not visible. The fix is below.

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

mail.jwpub.org/owa

IGNORE IMAGE ANALYSIS
.image-font-png
.image-font_size-png
.image-bold-png
.image-italic-png
.image-underline-png
.image-backcolor-png
.image-forecolor-png
.image-insertunorderedlist-png
.image-insertorderedlist-png
.image-outdent-png
.image-indent-png
.image-justifyleft-png
.image-justifycenter-png
.image-justifyright-png
.image-createlink-png
.image-unlink-png
.image-superscript-png
.image-subscript-png
.image-strikethrough-png
.image-alttext-png
.image-blockdirltr-png
.image-blockdirrtl-png
.image-undo-png
.image-redo-png
.image-removeformat-png
.image-table_icon-png
.image-insertpicture-png
.image-emoji-png
.image-format-png

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

Below is a screenshot of the same page with the fix applied.

I hope this data is helpful and could be added to all sessions of Dark Reader.

Thanks for your patience @Gusted

[Gusted]

Fantastic @timjobutler! The fix will be added via #9872, many thanks for your collaborative response.

[tbloch1]

This issue also affects my outlook web app. The solution provided does work if I change the web address accordingly. However, is there not some wild-card solution that can be implemented so that the solution works across different instances of OWA, without having to manually add in the exceptions for each one?