0

I understand em sizes are relative to the parent font size. As discussed in other threads (such as Font-size issues comparing chrome and Firefox), the default font size could be different for different browsers, so one should set it and/or use some reset css stylesheets.

I also understand that different browsers may render things in different size if they have a different zoom size.

Nonetheless, for a given parent font size, 1 em should translate to the same number of px, regardless of the browser.

However, in some cases (e.g. https://openlayers.org/en/latest/examples/custom-controls.html, https://github.com/openlayers/ol3/issues/6194) some elements with the same size in em are translating to a different number of px in Firefox and Chrome.

How is that possible?

Edit: On further testing on the same computer:

  • Firefox 50 on Windows and Chrome 55 on Windows 10: map icons are 25px
  • Firefox 50 on Linux and Chromium 53 on Linux: map icons are 33px
Community
  • 1
  • 1
Jose Gómez
  • 3,110
  • 2
  • 32
  • 54
  • Possible duplicate of [Font-size issues comparing chrome and Firefox](http://stackoverflow.com/questions/4899792/font-size-issues-comparing-chrome-and-firefox) – roberrrt-s Dec 02 '16 at 15:24
  • Can you specify which exact element you refer to? I'm not sure I understand. – Dekel Dec 02 '16 at 15:28
  • @Dekel In the github link, you can see that the sizes of the control in the map are different. Other buttons are created using px, but zoom buttons are created using em. – Jose Gómez Dec 02 '16 at 15:29
  • @Roberrrt I already checked the other thread; however, using a reset css or setting the font-size doesn't help in this case. Elements still have a different number of px. – Jose Gómez Dec 02 '16 at 15:31
  • Both chrome 54 and firefox 50 gives font-size of 18.23px (on windows) – Dekel Dec 02 '16 at 15:31
  • In my system it's 33px in Firefox and 25.08px in Chrome(ium). – Jose Gómez Dec 02 '16 at 15:32
  • The above comment was on Linux. I have done further testing in both Windows and Linux and got more surprising (and less understandable) results. – Jose Gómez Dec 02 '16 at 22:20
  • 1
    in my Surface (windows touch device) on chrome, it's applying ".ol-touch .ol-control button" CSS rule that sets the font-size to 1.5em (24px) however on firefox it's 1.4em (18.23px), some other rule may be overriding your ".ol-control button" – Pedro Costa Dec 02 '16 at 22:33
  • That is really informative, thanks! It could be related to the way different browsers in different OS are exposing the touch capabilities of my touchscreen. – Jose Gómez Dec 02 '16 at 22:37

1 Answers1

0

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.

Jose Gómez
  • 3,110
  • 2
  • 32
  • 54