[BUG] 1 rem size calculate err in content-script-ui (CSU)

HungerDeng commented 1 week ago

A bug occurred!

I used rem to set the font size, for example, font-size: 0.5rem. Some websites, like youtube.com, customize the HTML element's font size to 10px. This results in a computed font size of 0.5 * 10 = 5px.

However, the font size of the HTML tag can vary across different websites, which leads to inconsistent font sizes in my content-script-ui (CSU). Moreover, I cannot modify the website's own defined font size, as that would affect the page's display.

I found the definition of rem online:

Represents the font-size of the root element (typically ). When used within the root element font-size, it represents its initial value. A common browser default is 16px, but user-defined preferences may modify this.

To address the issue, I tried wrapping my CSU in an HTML tag like this:

const AAA = () => {
  return (
    <html style={{ fontSize: '16px' }}>
      <BBB />
    </html>
  );
};

export default AAA;

However, this didn't standardize my rem unit sizes in different website. The computed results of 0.5rem still is 5px, which youtube.com own defined html-font-size is 10px. What i wanted is 8px (0.5 * 16px) If I use Tailwind CSS, this issue becomes even more pronounced, as many utility classes (liked h-4, p-4 ...)in Tailwind are based on rem for size calculations.

How can I resolve this issue? I look forward to your response.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

NA

(OPTIONAL) Contribution

[ ] I would like to fix this BUG via a PR

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems.

tbrockman commented 1 week ago

Not a Plasmo bug, rem is always going to refer to what font-size is set in the documents <html> (it's also not valid to nest <html> tags), you have to handle this yourself.

As this is a common issue, you can probably search for workarounds to use em instead of rem with Tailwind (for example: https://github.com/tailwindlabs/tailwindcss/discussions/3768) if you want to ignore the font-size set in the webpage root.

HungerDeng commented 1 week ago

@tbrockman I really appreciate you taking the time to answer. As a front-end beginner, your response has been incredibly helpful to me. Thank you! I don't have any further questions, so I will go ahead and close this issue.

tbrockman commented 4 days ago

@HungerDeng No problem! Hope you're able to find a way to get things working.

PlasmoHQ / plasmo