Skip to content
New issue

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

#

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

Already on GitHub? # 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?

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

No branches or pull requests
1 participant
@dholbert