Bitwarden extension breaks website https://www.waf-seminar.de/ of the company I'm working for on Firefox

seisenreich commented 1 month ago

Steps To Reproduce

On macOS with Firefox and the Bitwarden browser extension active go to '...'
Have a look at the search bar on top and the search widget right under the header. They look like HTML without CSS.
Do the same with Bitwarden deactivated. Looks as it should.

Expected Result

I expect the bitwarden browser extension not to break the CSS in our web application.

Actual Result

The CSS is not loaded for form elements with the extension active, for some reason.

Screenshots or Videos

Broken state:

Fixed state (extension off):

Additional Context

If you need further information let me know.

Operating System

macOS

Operating System Version

14.4.1 (23E224)

Web Browser

Firefox

Browser Version

FF 126.0.1 (64-Bit)

Build Version

2024.4.2

Issue Tracking Info

[X] I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

pwseo commented 1 month ago

I was not able to reproduce this issue. Perhaps try reproducing the issue on your end in a new Firefox profile with just the Bitwarden extension installed.

System information: GNU/Linux Debian 12 (bookworm), Firefox ESR 115.11.0esr, Bitwarden 2024.4.2.

scheinercc commented 1 month ago

I was able to reproduce this

BW enabled

BW disabled

Note: At first I loaded the page in a Private Tab, and got the broken layout. Next I loaded in a normal tab, and at first got the correct layout. Every consecutive reload after that, the layout was broken as long as BW was active.

This indicates to me that a race condition might the issue.

I tried to figure out where those styles (.css-9xhyq7 etc.) are getting loaded from, but couldn't figure out the source.

This was on macOS 14.5, Firefox 128.0b2, Bitwarden 2024.4.2

seisenreich commented 4 weeks ago

@scheinercc thanks for reproducing the issue on your machine!

Most probably this is rendered css in js inside that React component. So it's rendered inline after initial pageload.

When you look inside the page sourcecode the css class is not in there. But later on the browser tells you the css would be inline.

So initial pageload -> React gets loaded, parses the JSON data from the server response and then renders the actual components. So it could absolutely be a race condition.

seisenreich commented 4 weeks ago

I was not able to reproduce this issue. Perhaps try reproducing the issue on your end in a new Firefox profile with just the Bitwarden extension installed.

System information: GNU/Linux Debian 12 (bookworm), Firefox ESR 115.11.0esr, Bitwarden 2024.4.2.

Thank's for trying to reproduce! I still got it with just Bitwarden extension active. Used with the most current available version for MacOS.

So maybe it's only broken in Firefox on Mac?

System: MacOS 14.4.1 (23E224) Firefox 127.0 (updated right before trying to reproduce this again, of course) Bitwarden 2024.4.2

bitwarden / clients