search

necolas / normalize.css

A modern alternative to CSS resets
http://necolas.github.io/normalize.css/
MIT License
52.28k stars 10.67k forks source link

Firefox vs. Chrome #883

Open David263 opened 2 years ago

David263 commented 2 years ago

When I use normalize.min.css v8.0.1 as my only css file for fairly ordinary HTML, I get different renderings for Firefox vs. Chrome.

Here are the differences:

font face (Arial vs. Times New Roman, I'm guessing), font size (possibly), and definitely overall zoom factor.

Also, both show an extra top margin, although no margin at left. I looked at elements with dev tools, and cannot find any correction by normalize for the initial top margin. When I experiment with dev tools, I find that the rule "margin-top:-1.4rem" works perfectly to remove the top margin in FF.

Normalize is a great idea, and I appreciate all your work, but I'm not seeing it working as expected on my Windows 10 Home 64 computer.

David263 commented 2 years ago

I just tried reset.min.css 2.3.0, which has the goal of removing all default styles. It did remove the top margin, but the type faces and sizes are still different. I'm not sure about whether it corrects the overall value of "zoom".

So I'm left with an important question: will all users have the same results, or is this due to some configuration of my development computer?

David263 commented 2 years ago

Here are my additional normalizing fixes, added after normalize.min.css:

/* Fix differences: FF/CH */
body {zoom: .7;font-family: Arial,Helvetica,sans-serif;margin-left: 4rem;margin-top: 3.2rem;}

The result is an error in just one or two pixels in visually comparing the page rendered in FF and CH. But I don't know what other users will see!

David263 commented 2 years ago

Oops, I just found https://coderwall.com/p/i_ltpg/rem-values-rendering-differently-in-modern-browsers, which describes browser inconsistencies in implementing 'rem' units.

So my fixes become as follows:

html {font-size: 1rem;}
body {zoom: .7;font-size: 1rem; font-family: Arial,Helvetica,sans-serif;margin-left: 4rem;margin-top: 3.2rem;}
sean1138 commented 2 years ago

line-height should be unitless? you don't want 1rem (16px possibly) for line-height if you end up with 24px font-size on a heading element with font-size:1.5rem, do you? just something i noticed at the link you provided, they're using rem unit for line-height.

why the zoom:.7? when i disabled that rule firefox and chrome on windows look the same: https://codepen.io/sean1138/pen/BarQYwa image

both browsers zoomed out to 80% with the zoom:.7 disabled looks ok too: image

David263 commented 2 years ago

In my test project, I eliminated the line-height rule. It is not needed, unless you change the font size a lot.

On my computer these two Pens are very different: the Chrome one is way larger!

How can this happen? Aren't browsers the same from computer to computer?

miquelfire commented 2 years ago

You might have a setting on Chrome (or an OS setting of the of the browsers are ignoring) that is changing things around on you.

David263 commented 2 years ago

Both settings (font size, page zoom) were set to default. When I change page zoom to 75%, Chrome is only slightly larger than Firefox. I have my Windows OS set to 125% zoom, but I did an experiment, setting it to 100%, and it made no difference in the size rendered by the two browsers. Firefox zoom is set to 100%. A puzzle. But I can leave the Chrome scaling at 75% and it almost works for me. Too bad Chrome doesn't support 70% scaling. I wonder if others have this same problem.

I have poor eyesight, so I may have tinkered with some other Windows setting that one of the browsers honors and the other does not. That must be the problem.