Menu showing differently on safari vs chrome

[scarlettwyner]

Hello!
I am having trouble getting my menu to show correctly on Safari where as it shows normally on Chrome. on safari a funny line is coming up at the top of the text cutting the top of the text off, whereas it is fine on chrome (see screenshots). Can you please help? Thanks so much :)

[Richard]

Dear Scarlett

@scarlettwyner

Are you able to post a link to your website? 🔍
Interesting to see if it's the menu bar height on safari (white line at top)

---

Talk soon & best wishes

Richard

[scarlettwyner]

Hey Richard yes of course -- it is kirstycameron.studio
Would be so grateful for your help :)
Thanks so much!!
Scarlett

[scarlettwyner]

Hi Richard,
Any updates on this?
Thank you! :)

[Richard]

Dear Scarlett

@scarlettwyner

Sorry about any delay over Christmas and New year ✨

I am unable to find the same text as the example anymore but maybe you still have the problem?

---

Wish to help and best wishes for 2022! ⭐️

Richard

[layotto]

Hi there
Seems like I have a similar issue. My menu is 1px larger on Chrome than on Safari.
You notice in Chrome right in the center a 1px step between the left and right side of the menu bar. In Safari however it's a straight line.
I can make it a straight line in Chrome but then Safari has the 1px step.
here is the link to the menu …
www.artdocu.net
Thanks,
Peter

[layotto]

… managed to fix it. It was the font size of the menu. Safari renders sizes differently than Chrome. I fiddled with the font sizes in the menu making sure everything is in px rather than em. Checking "Customize -> Menu Style -> Primary Menu" and "Text Formats" also making sure everything is in px rather than em or %.

[arminunruh]

oh great catch! so weird how browsers render fonts differently!

[Ingi]

Just putting this out here if anyone is in trouble with fonts in safari going crazy:

/* Mobile Font Styles Fixes */
.mobile-nav a {font-variant-ligatures: no-common-ligatures; font-weight: 400;}
.sub-menu a {font-family: 'National2Compressed-light'!important; font-weight: 400;
font-variant-ligatures: no-common-ligatures;}
a[href^=tel] { color: inherit!important; }
_default _H1 _Index _Titles _Tags {letter-spacing: 0!important; font-weight: 400!important;}
.lay-textformat-parent {letter-spacing: 0!important; font-weight: 400;}
p {letter-spacing: 0!important; font-weight: 400;}
.title {font-family: 'thefontyouuse'; letter-spacing: 0em!important; font-weight: 400!important; -webkit-font-smoothing: subpixel-antialiased !important; text-rendering: optimizeLegibility !important;}