Pages elements displaying in different sizes across various browsers


(Ollie) #1

Hi there,

When testing across various browsers (Safari, Firefox, Chrome) I have found that out of the 3, Google Chrome displays everything smaller.

Either that or Chrome is displaying correctly and Safari and Firefox are displaying to big. This is in terms of text size as well as images and other elements.

Hoping that there is a work around for this as I would prefer it to remain consistent across all browsers.

Thanks


(Rick) #2

See if this maybe helps:

I also always add this to the body style of my HTML document, which helps against FF bolding fonts and Safari doing the opposite.

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: subpixel-antialiased;

If this doesn’t help could you provide an example Hype document with your problems, it makes things so much easier to troubleshoot over long distances. :smile:


(Ollie) #3

Thanks for the response Rick.

I have been looking into this myself since posting here and have started to get closer to a solution I believe.

I looked back at previous projects to see if similar had happened and compared settings within these Hype projects.

I found that not ticking “initial scale 1.0” in the mobile options has now made Firefox reduce in size to match Google Chrome. Firefox does still have the bolding fonts as you mention, so I will now add the code you have listed.

I’m not sure if unticking “initial scale 1.0” has had an effect on a mobile device as I haven’t tested yet so it might not be a fully successful solution.

But currently it is just Safari which is the weak link here. It remains quite a bit larger from the project which has been designed. Quite odd but I hope this can be resolved as its important to have it displaying consistent across all browsers.


#4

Can you make sure you don’t have any zooming setup in Chrome? ⌘ + 0 will reset.


(Ollie) #5

Hi Daniel,

I have just reset this across all browsers (Chrome, Firefox, Safari) and its done the trick! :wink:

A little weird as all other sites I visited have displayed the same size thats why I questioned whether I had an issue, as it was only when I was previewing a Hype project I noticed the sizes varying.

Great its back on track, thanks for the help!


(Ollie) #6

Just following on from your answer to bolding fonts in Firefox and the opposite in Safari.

I have two custom fonts for the complete project and they render the same for Chrome and Safari but Firefox is much brighter which could be the same as bolding?

Where should I add the following in the Hype project to try and correct this?

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: subpixel-antialiased;

Thanks.


(Jonathan Deutsch) #7

In the Document Inspector, click Edit Head HTML… and then add this code:

	<style>
	* {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: subpixel-antialiased;
	}	
	</style>

I’m not sure how much longer the webkit version will be supported; macOS 10.14 Mojave is doing away with subpixel antialiasing.