Altering rem font-size produces unexpected results

[shihfu]

Describe the bug
It is common to set the font-size of the html element to either 1px or 10px. By making this modification, it unexpectedly changes the text size within rq dev tools.

To Reproduce

1. Add font-size: 1px to the html element.
2. Open RQ dev tools.

Expected behaviour

• Modifying the font-size on html element should not affect the dev tools style.

Screenshots

Desktop

• All browsers.

[TkDodo]

can you please provide a codesandbox reproduction? Because I can't reproduce hat. The ReactQueryDevtoolsPanel comes with it's own style settings, including font-size.

[shihfu]

While using font-size: 10px on the html element, I was able to work around this unexpected behaviour with a custom style selector targeting all divs with inline-styles that have a 0.9rem.

.ReactQueryDevtools {
  div[style*="font-size: 0.9rem"] {
    font-size: 1.2rem !important;
  }
}

[raoufswe]

@TkDodo to reproduce the issue, open inspect then click on the HTML tag and add font-size: 1px;

the text will become super small because the font size of some elements in the devtool is set using rem values, thus, the font size will always be relative to the root element.

[TkDodo]

okay, got it. what's the suggested fix please? Should we just use em instead of rem ? Or should we use rem everywhere to respect the root element's settings?

Though I don't really understand the use-case behind setting font-size: 1px on the html element? Why would that be a "common" thing to do?

[shihfu]

I believe em would be more appropriate of the two. The reason being, font-size can only be defined on the html tag in which there can only be one instance of in the DOM. Unless you put it in an iframe, but that might open a whole can of worms.

A base of 1px or 10px makes it easy for the developer to quickly convert between rem and px.

[TkDodo]

I would love a PR if you’d like to contribute that :)