Font-Size Issues Comparing Chrome and Firefox

Font-size issues comparing chrome and Firefox

I suggest you use a CSS reset like the one from YUI. It will make your pages much more consistent across all browsers, including font rendering. It makes the biggest difference with IE and the other browsers, but it gets rid of all manner of inconsistencies.

Why does my font-size display differently on firefox vs. chrome mobile browsers?

Every browsers have different default values, even though most of them are same.

Designers usually tackle this problem by normalizing/reseting the default browser values using a Normalize Script.

You can read about this more in this article.

a minor difference of font rendering in firefox and chrome

I feel there is no use in trying to sort this out. A simple pen at http://codepen.io/anon/pen/dXdwmQ shows that the fonts are rendered differently. Even with reset.css. I'm checking in Windows 7. I think mac renders it correctly.

<link href="httpshttps://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<style>
  body {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    background:#fff;
    font-size: 16px;
  }
</style>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Good to know at least now. Lesson learned :)

em has different px size in Firefox and Chrome, and in Windows and Linux

As mentioned by @Pedro_Costa, the .ol-touch style is being triggered only in some browsers, this is making the fonts bigger as per the following CSS rule:

ol-touch .ol-control button{font-size:1.5em}

So, the issue is that Open Layers is detecting touch capabilities only in some browsers and OS.

Checking the OpenLayers code I see:

ol.has.TOUCH = ol.ASSUME_TOUCH || 'ontouchstart' in window;

Which looks all right. So, apparently it is an issue of Chromium in Linux and Firefox in Windows that are not detecting correctly the touch screen and therefore not exposing the ontouchstart element.

span height different in Firefox vs Chrome

Use this :

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block;
}

The difference is due to different render of fonts in browsers.

Rems rendering differently between Chrome and Firefox

That happens most certainly because your browsers have different font-size settings, you can easily check it with this fork of your codepen.

alert(document.querySelector('.rem-test').scrollHeight);

If the alerted values are different in chrome and firefox you should definitely check your font-size settings.

getPropertyValue('font-size') returns different value for firefox and chrome

The following code works on firefox as well:

function checkminfont() {
var m = '<div id="min-font-size-tester"';
m += ' style="font-size: 2px; line-height: 1;';
m += ' display: none;">M</div>';
$('body').append(m);
minsize = $('#min-font-size-tester').height();
alert(minsize);
} 

my thanks to Bobby Jack: http://www.fiveminuteargument.com/minimum-font-scaler

---

Related Topics