Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
acicali opened this issue Sep 10, 2019 · 19 comments
Open

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

acicali opened this issue Sep 10, 2019 · 19 comments

Comments

@acicali
Copy link

@acicali acicali commented Sep 10, 2019

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

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Sep 11, 2019

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

@m4rc1e

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Sep 11, 2019

  • 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

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Sep 16, 2019

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

This comment has been minimized.

Copy link

@JeremyLopez JeremyLopez commented Sep 18, 2019

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

This comment has been minimized.

Copy link

@naveen-t-r naveen-t-r commented Oct 24, 2019

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

This comment has been minimized.

Copy link

@bemyhre bemyhre commented Nov 21, 2019

I found this exact same issue for the Muli font.

@m4rc1e

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Nov 22, 2019

@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

This comment has been minimized.

Copy link

@bemyhre bemyhre commented Nov 22, 2019

@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

This comment has been minimized.

Copy link

@bemyhre bemyhre commented Nov 22, 2019

Also, I change the font and it works fine.

@m4rc1e

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Nov 25, 2019

@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

This comment has been minimized.

Copy link

@nickendle nickendle commented Dec 16, 2019

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

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

@m4rc1e

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Dec 16, 2019

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

This comment has been minimized.

Copy link

@nickendle nickendle commented Dec 16, 2019

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

@m4rc1e

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Dec 16, 2019

Thanks for confirming.

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

@m4rc1e

This comment has been minimized.

Copy link
Collaborator

@m4rc1e m4rc1e commented Dec 16, 2019

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

@nickendle

This comment has been minimized.

Copy link

@nickendle nickendle commented Jan 2, 2020

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

@nickendle

This comment has been minimized.

Copy link

@nickendle nickendle commented Jan 9, 2020

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

This comment has been minimized.

Copy link

@jimmybrancaccio jimmybrancaccio commented Jan 9, 2020

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

This comment has been minimized.

Copy link

@floralsystems floralsystems commented Jan 9, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.