Menu icon Foundation
Weird display/font-size problem between Firefox and Chrome

Foundation chrome

Foundation firefox

Hello!

I really like foundation and I'm using it as a base for the relaunch of my website.

I'm really satisfied what Foundation offers but there is one thing that bothers me and "destroys" my layout a little bit.

Attached you'll see two screenshots taken from the Foundation home page. One from my Chrome browser and one from Firefox. Both have 100% zoom so the page should look almost the same in both browsers. But as you can see, in Firefox the font size is higher and there are less elements visible on the whole page. It looks like it was zoomed but it isn't!

This is a problem for my website when in Chrome everything looks fine and when I use the firefox it blows.

Any ideas what might cause this or how to get the firefox to the font-size/layout like in chrome? Both browser versions are the current version.

Greetings

Carsten

Foundation chrome

Foundation firefox

Hello!

I really like foundation and I'm using it as a base for the relaunch of my website.

I'm really satisfied what Foundation offers but there is one thing that bothers me and "destroys" my layout a little bit.

Attached you'll see two screenshots taken from the Foundation home page. One from my Chrome browser and one from Firefox. Both have 100% zoom so the page should look almost the same in both browsers. But as you can see, in Firefox the font size is higher and there are less elements visible on the whole page. It looks like it was zoomed but it isn't!

This is a problem for my website when in Chrome everything looks fine and when I use the firefox it blows.

Any ideas what might cause this or how to get the firefox to the font-size/layout like in chrome? Both browser versions are the current version.

Greetings

Carsten

Rafi Benkual over 4 years ago

Are you using Normalize? Or any other CSS reset?

Normalize is packaged in with Foundation and is optional.

The Foundation site doesn't have it loaded so that's likely what you're seeing. Some resets are built in but others would require Normalize.

Carsten over 4 years ago

That is the weird thing. In my project I am using normalize.css but firefox always looks "zoomed"!?

Carsten over 4 years ago

Well, I think I've found the reason why this is happening. It's called "DPI virtualization" in newer windows versions:

"Firefox now adjusts the page zoom level according to your Windows settings, to better support high DPI displays. For example, if Windows is set to 125% font size (120dpi), the content area will be zoomed by 25% compared with Firefox 21 and earlier."

That might be the reason why it looks "zoomed" on my machine.

Source: https://support.mozilla.org/de/questions/962979

Brian Sage 21 days ago

Hello,

 

I had a similar issue, when I moved from Firefox to Chrome. As it turned out it was a screen dpi issue in Windows 10. The solution was quite simple: to add /high-dpi-support=1 /force-device-scale-factor=1 to the shortcut target in Start Menu. then I tried to change layout.css.devPixelsPerPxto to 1.1 and it worked perfectly.
Compact theme for fast essay typer