Search code examples
csssafaricreate-react-app

Create React App modifies font size in Safari

I ran into a really strange issue and I can't really get my head around what is happening here. I was working on the theming of my recent React App when I realised that the default font size is different in Safari than in Chrome or Firefox. At first I thought this has to do with responsive font sizing since I know that Safari treats the rem values differently. Thus, for testing purposes, I have created a fresh install of CRA and tested a header and a paragraph with fixed font sizes:

h1 { font-size: 32px; }
p { font-size: 16px; }

Unfortunately it happened again and the result can be seen here:

Font size comparison Create React App. From left to right: Chrome, FF, Safari

There is about a 4px difference between Chrome / FF and Safari. When checking the developer tools of the individual browsers, all of them show the right font size (and line height).

I thought this might have something to do with Safari (since it seems that this browser is on the path of being the new Internet Explorer), so I have created a simple HTML 5 page to test the behaviour again. This is the result:

Font size comparison HTML 5 page. From left to right: Chrome, FF, Safari

As you can see, everything appears as expected which indicates it has nothing to do with Safari.

I have also tried to reset the CSS with normalize.css but no success either. Did anyone else experience this problem?

My setup:

SYSTEM --
Mac OS 11.0.1
Safari 14.0.1
Chrome for Mac 86.0.4240.198
Firefox for Mac 82.0.3

CRA -- 4.0.1
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"

"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
Solution

  • After playing around for hours, setting up test projects and trying to verify the results on codesandbox.io, I found out that (occasionally) Safari is setting the initial zoom level to 125%. Since this is not always the case I am not sure if it has something to do with my system or it is really something with CRA and Safari...

    I would be great to hear if anyone has been experiencing the same issue.

    Sorry if I have been wasting anybody's time here!