Adobe fonts look different on Mac Safari/Chrome

Forum|Forum|6 years ago
July 12, 2019
3 replies
2080 views

Hi, sorry if this is the wrong place to ask but was speaking to someone from the Web support team and they suggested to post this here.

I designed a website with dreamweaver, using background color to hide/reveal text on hover. This works fine in Dreamweaver and on IE/Firefox/Chrome on Windows 10 perfectly, however on Safari and Chrome on Mac, there seems to be a different calculation of the height of the background color. Firefox appears as should. It doesn't seem to be related to screen size, and developer tools shows that it's only the height of the "boxes" that is any different, while the width stays the same. Is there some chance that the ios/browser combination interprets the vertical ascent/descent of the web font differently? Any ideas how to get around this issue? If it helps, the font is Operetta8. If there's any more information that can help, let me know.

Many thanks!

Here is how it should appear (Mac/Firefox):

And here it is on chrome on Mac:

This topic has been closed for replies.

C

christiank89445804Author

Participant

The position absolute doesn't isn't relevant to the question I asked. My question is exclusively about the height of the fonts between the different devices and browsers. If it is the case that all iOS devices use the same rendering engine a. why does Firefox display the site correctly on iOS? b. could you explain what that means? i.e. does it mean that with iOS, webfonts will always behave differently than with Windows? Is there anything that can be done about it?

pziecina

Legend

All browsers use a slightly different way of working out the base font size when using em or rem, (IE and edge is normally a couple of pixels for body text) which is measured in pixels. Using the em value it takes its base measurement from the base font size, unless you set a base font in your css, (target the body element).

Try setting a font-size, that way only slight variations should occure.

C

christiank89445804Author

Participant

I've just tried your suggestion and changed the font size to px but it's still the same. There's around 70px different in the height either way I try it, though the width is the same. It's not about the size of the text, it's the height. I've just posted a side by side comparison to try and make it a bit clearer.

At this point I'm wondering if this is just a quirk of this font along with the combination of os/browser...

C

christiank89445804Author

Participant

Yes, zoom level is at 100%, also the issue is replicated in mobile, 13/15/27 macs.

The link is: www.alternative-fictions.com/index1.htm - the person from web support said that it didn't seem to be the code from what he could see, but if there is something I could add to the code, that would be great.

pziecina

Legend

I take it you are testing on windows desktop with firefox, and on iOS mobile devices, (safari, chrome).

First position absolute will not work correctly as the position will appear to move depending on screen size, (50% of 10 inch screen is smaller than 50% of 20 inch screen).

Also on iOS devices, it does not matter which browser you use, they all use safari webkit rendering engine, (the only difference being, is that you may get newer features in browser updates from Chrome, but you have to wait for a iOS update for safari).