Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Facebook container introduces some styles for <body> that show up in devtools and impact rendering if you happen to use the right variable name #971

Open
dholbert opened this issue Sep 11, 2024 · 1 comment
Open

Facebook container introduces some styles for <body> that show up in devtools and impact rendering if you happen to use the right variable name #971

dholbert opened this issue Sep 11, 2024 · 1 comment

Comments

@dholbert
Copy link

  • Facebook Container Version: 2.3.11 (this affects 2.3.9 and newer)
  • Operating System + Version: Ubuntu Linux 24.04
  • Firefox Version: 132.0a1 (2024-09-11) (64-bit)
  • Other installed Add-ons + Version + Enabled/Disabled-Status: None

Actual behavior

Facebook Container adds a style rule that applies to the <body> element in all web content, as shown in DevTools. (This style rule has 10 declarations and takes up a substantial amount of space in the DevTools rules view, which makes it feel slightly cluttery; and it impacts the page behavior if the page happens to use these variables.)

Expected behavior

Facebook Container shouldn't add any styles for <body>, for regular web content.

Steps to reproduce

  1. Visit https://example.org/ (or any page)
  2. Open DevTools inspector (e.g. right-click and choose "inspect element")
  3. Focus the element in the devtools inspector.
  4. Look at the specified styles on the right side of the devtools inspector.

Notes

Here's a screenshot showing the unexpected styles shown in devtools:
image
@dholbert
Copy link
Author

This style rule lives here in the code:

contain-facebook/src/content_script.css

Lines 1 to 12 in da5ee2e

body {
--fbc-blue-60: #0060df;
--fbc-blue-70: #003eaa;
--fbc-gray-20: #ededf0;
--fbc-light-gray: #F0F0F4;
--fbc-white: #ffffff;
--fbc-transition: all .15s cubic-bezier(.07,.95,0,1);
--fbc-borders: 1px solid #ededf0;
--fbc-primary-text: #15141A;
--fbc-secondary-text: #5B5B66;
--fbc-font-size: 13px;
}

git blame indicates that these styles were added here, where they seem to have been intended to target some of the addon's UI rather than actual web content:
00ded76

That commit included some regular CSS properties, too (like font-family: ... and overflow: hidden;) which presumably broke/impacted body rendering in lots of cases -- those were removed (or moved to another rule, for font-family) in subsequent commits like:
9503ba9
3e6dc51

...but these CSS variables remain as being specified on body. Maybe they can move to the .fbc-container CSS rule, like the font-family declaration did in that last commit?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dholbert