Safari 12 crashes upon clicking a <select> element that uses Quicksand

[acicali]

A page will crash in MacOS Safari 12 at the moment the user clicks a select element whose font-family is Quicksand.

A reduced test case is below (or visit https://jsfiddle.net/nL1abgwx)

<form>
    <select style="font-family: 'Quicksand';border: 0;">
        <option>Click here to crash this page</option>
    </select>
</form>
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Quicksand:400,500'/>

Notes:

• The crashing behavior no longer happens if the font is simply switched to Oswald. It seems to only happen with Quicksand.
• Multiple font-weights in the tag appears to be necessary to cause the crashing behavior, not sure why.
• The select element must have border: 0 because Safari will not apply the font without it (see here: https://css-tricks.com/dropdown-default-styling/#article-header-id-2)

[m4rc1e]

Thanks for reporting! can confirm your findings. I'll investigate further.

[m4rc1e]

• Issue is also happening when using the upstream font
• Upstream fonts pass ots-sanitizer (v7.1.8)
• If I regenerate the font using just fontmake with command: fontmake -g Quicksand.glyphs -o variable. The genned font has the same issue. This means our post processing in the upstream isn't to blame either.

I know a font engineer at Apple so I will get them to take a look. In the meantime, I'll keep debugging the source.

[m4rc1e]

Apple employee can't replicate the issue on OS X 10.15 (Catalina, still not released) but we can in 10.14. I'll investigate further this week and submit a fix if I can find the issue.

[JeremyLopez]

I was able to recreate the issue and get it working. It seems to be directly related to how the font is loaded. The following fails:

<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet">

But this works (for some reason):

<link href="https://fonts.googleapis.com/css?family=Quicksand:300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:700&display=swap" rel="stylesheet">

Took me forever to realize this is what was crashing my app.

[naveen-t-r]

The issue happened to me also. The simple solution is you can remove the "font-family: 'Quicksand', sans-serif;" from the body in CSS and call it separately in h1, h2, p....etc..
It worked for me. Please check and let me know if works fine.

I have added the below in my CSS file:
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');

and removed "font-family: 'Quicksand', sans-serif;" from body in CSS.

[bemyhre]

I found this exact same issue for the Muli font.

[m4rc1e]

@bemyhre I'm not able to replicate the issue. Does this jsfiddle work for you?

Also, what version of OS X are you running?

[bemyhre]

@m4rc1e your jsfiddle works for me.

Check out this page on safari. https://tornadoughalli.com -- this crashes for me and the user. For some others, it does not.

If I inspect the elements and delete the following element AFTER the page renders, everything works hunkey dory:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli%3Aregular%2Citalic%2C300%2C300italic%7CKarla%3Aregular%2Citalic%2C700%2C700italic%26amp%3Bsubset%3Dlatin%2C%7CRoboto%20Condensed%3A300%2C300i%2C400%2C400i%2C700%2C700i%7CRoboto%3A300%2C300i%2C400%2C400i%2C500%2C500i%2C700%2C700i%7COpen%20Sans%3A400%2C400i%2C700%2C700i%7CSource%20Code%20Pro&amp;display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

Safari Version 12.1.1 (14607.2.6.1.1)
Mojave 10.14.5

[bemyhre]

Also, I change the font and it works fine.

[m4rc1e]

@bemyhre your embed doesn't look correct.

If I pick Open Sans + Roboto Condensed with a variety of weights and I only want Cyrillic + Vietnamese, I get the following embed which appears much cleaner.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700|Roboto+Condensed:300,300i,400,400i,700,700i&display=swap&subset=cyrillic,vietnamese" rel="stylesheet">

Please don't make a custom embed, just use the font selector on fonts.google.com. It will build it for you.

[nickendle]

Also experiencing this in Safari 12 with Dosis, Muli, and Rokkit. This Codepen crashes for me consistently:

https://codepen.io/nickendle1/pen/abzBZwG

[m4rc1e]

Thanks for the test case @nickendle. Are you running OS X 10.14?

I'm not able to replicate the issue on 10.15.

[nickendle]

@m4rc1e sure thing! This is crashing with OSX 10.14, all later versions of Safari/OSX seem to work ok.

[m4rc1e]

Thanks for confirming.

I'll see if we're making any unnecessary modifications to the fonts which may be causing this.

[m4rc1e]

Just tried the codepen on 10.13 and can confirm it crashed Safari.

[nickendle]

@m4rc1e thanks for checking this out - just wondering if any progress has been made on finding out the cause?

[nickendle]

Seems as though this issue has been fixed! I'm not experiencing any crashing with the same tests I tried before.. but I'm curious to see if others in this thread are seeing the same thing.

[jimmybrancaccio]

Yeah, it magically seems to be working for me as well. I hadn't even realized it until I noticed one of my sites loading the CSS as:

<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Quicksand:400,500'/>

and not the multiple call as I previously had as the workaround. And I was like...Oh...it's fixed?! 😝

[floralsystems]

Is it the font or Safari (or Mac OS) that has been fixed?

It'd be nice to know if font-family can safely be applied to elements.