Newly released 2.3.3 version overwrites body fonts

[zoliszabo]

• Facebook Container Version: 2.3.3
• Operating System + Version: Windows 10 Pro (21H2)
• Firefox Version: 104.0.2
• Other installed Add-ons + Version + Enabled/Disabled-Status: Don't matter.

Actual behavior

font-family, font-size and color rules defined on body of websites are overwritten by CSS embedded into the newest version (2.3.3) of the plugin. The code in question is here: https://github.com/mozilla/contain-facebook/compare/2.3.2...2.3.3#diff-d6d3ff0148c2b8fa45833179130aa22914f0efb639fc40ca86cc68d45b7dafbfR2

Expected behavior

Shouldn't override website CSS. Plugin CSS should be scoped better to only apply to the plugin's elements.

Steps to reproduce

1. Have a website that defines font-family / font-size / color on body level.
2. Use the Facebook Container plugin.
3. See what happens with the fonts...

[lisenet]

The same problem here, it started happening today after the plugin upgrade to 2.3.3.

[zoliszabo]

Same as #857. (It wasn't there when I started writing.)

[adrian-pasten]

Same Problem here is overwrite also color so on dark template fonts with withe color is black no posible to read teh css is content_script.css, fixed installing version 2.3.2

body {
    --blue60: #0060df;
    --blue70: #003eaa;
    --primaryText: #15141A;
    --secondaryText: #5B5B66;
    --grey20: #ededf0;
    --light-gray: #F0F0F4;
    --white: #ffffff;
    --transition: all .15s cubic-bezier(.07,.95,0,1);
    --borders: 1px solid #ededf0;
    font-size: 13px;
    font-weight: 400;
    color: #15141A;
    font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

[Avenyet]

Same issue. Browser updated to 104.0.2 with the newest plugin and font sizes are getting overwritten to 13px

content_script.css from extensions/@contain-facebook.xpi

[LiamDawe]

I thought I was going insane.

It breaks the styling on Tweetdeck and my own website, despite my website not touching Facebook at all.

[geommr]

also breaking styles on my site due to target.querySelectorAll is not a function error:

[kamenlitchev]

Windows 11 64-bit, Firefox 90.0.2 - same issue - some sites got fonts totally messed up...

[Felixoid]

Hello. For me it breaks not only https://tweetdeck.twitter.com/, but even github in a dark mode is spoiled up completely

See a comment how to fix it

[the-ge]

Kubuntu 22.04.1 LTS, Firefox 104.0.2 (64-bit), Facebook Container 2.3.3 - me too. I found content_script.css loading over page styles. Being a web developer, it is really annoying.

[moloko]

Same here, only noticed when font in GH changed suddenly to SF Pro Text

[Toriigate]

Same here. Breaks the look of Github, Wikipedia (Mobile) and gHacks. FF Stable 104.0.2, add-on version 2.3.3

[Yahiroz]

Same too, breaks OcUK's forums and Google:

[woubuc]

Same problem here, it seems to override the body styles of all websites. I had to downgrade the add-on to the previous version & disable automatic updates.

[mehdibo]

Same problem here

[Felixoid]

@woubuc thank you for a hint

I had to downgrade the add-on to the previous version & disable automatic updates.

Here's how to do it:

• on about:addons page click to the addon
• Disable automatic addons
• Install the addon from releases https://github.com/mozilla/contain-facebook/releases/download/2.3.2/facebook_container-2.3.2-fx.xpi

That's all, folks

[its0x08]

Same here!!

• Install the addon from releases https://github.com/mozilla/contain-facebook/releases/download/2.3.2/facebook_container-2.3.2-fx.xpi

This fixes it!!

[lisenet]

@Felixoid saved the day!

[kellenmurphy]

Same here. I just disabled the add-on temporarily... 👀 for an updated version.

[VitaliyYa]

Same issue - some sites got fonts messed up.

[bakulf]

Version 2.3.3 was buggy and, as a temporary fix, we just released a v2.3.4 as a v2.4.2 repackaged. Please, update the add-on to have a fix for this issue. All the features introduced by v2.3.3 will be released in v2.3.5 as soon as possible.

[zacharyp]

Why would a facebook container affect fonts at all?

[dveditz]

Because web extension "content scripts" operate in the page context—that's the point!—which means mistakes in extension code affects web pages.

Do you mean "how"? In this case CSS was mistakenly applied to the page's body element instead of the body of the iframe created to hold the extension UI.

[johnhamlin]

Same issue here. Was going nuts trying to read MDN in dark mode.

[Maus3rSR]

Same here, really annoying

[valscion]

Steps to fix

1. Go to about:addons page (write about:addons to your URL bar)
2. Click on the cog icon menu
3. Select "Check for updates"

After that, the Facebook container extension is updated and your fonts will now look correct again.

https://user-images.githubusercontent.com/482561/189325745-efade561-3ec5-4c4b-8de7-abc7aa72b2e8.mp4