'Chrome Extension shows incorrect font size compared to the local dev testing

I was developing an app while I was testing it on Google Chrome with react npm run, but when I Uploaded the Extension to Google to test it, something very strange happened, the fonts is showing as small, and I don't know what the problem could be. I'm using EM units and my size is 100%, the same as I had on local testing. Does someone know anything related to this and how I can fix it?

Here is how it shows on the development localhost: Full Browser Screenshot on Localhost

And here is how it shows when I upload to Google with 100% of the same settings I had while I tested it on localHost: Full Browser Screenshot when I upload it on Chrome to test

google-chrome-extension

Solution 1:^[1]

I've faced the same problem and after digging development console I've noticed the problem.

Chrome injects a css script to body element as shown in below (only for extension pages):

body {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 75%;
}

So adding a font-size: 100%; to body css can fix our problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	superabsorbent polymer

'Chrome Extension shows incorrect font size compared to the local dev testing

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]