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

Font-display breaking rel=preload on IOS safari #274

Open
leonmondria opened this Issue May 2, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@leonmondria

leonmondria commented May 2, 2018

Heads up!

When using:
<link rel="preload" href="x.css" as="style" onload="this.onload = null;this.rel='stylesheet'" />

@font-face { font-family: "Droid Sans"; src: url("/content/font/DroidSans-Bold.woff"); font-weight: bold; font-style: normal; font-display: swap; }

If you have font-face declarations with font-display: swap;, IOS safari doesn't set the rel attribute so no stylesheet will be applied.

I have this issue with IOS 11.3, can anyone confirm?

@leonmondria

This comment has been minimized.

Show comment
Hide comment
@leonmondria

leonmondria May 2, 2018

This apprears to be fixed in Safari release 53:

https://developer.apple.com/safari/technology-preview/release-notes/:
Fixed loading the stylesheet when changing the element rel attribute from preload to stylesheet

leonmondria commented May 2, 2018

This apprears to be fixed in Safari release 53:

https://developer.apple.com/safari/technology-preview/release-notes/:
Fixed loading the stylesheet when changing the element rel attribute from preload to stylesheet

@zachleat

This comment has been minimized.

Show comment
Hide comment
@zachleat

zachleat May 2, 2018

Member

Hmm, interesting that the release notes would include that! Does the provided demo work for you? https://master-origin-loadcss.fgview.com/test/preload.html

It seems to operate fine for me on an iPhone X and iPhone 8 Plus running iOS 11.

Are you saying this is only limited to stylesheets that are using font-display: swap?

Member

zachleat commented May 2, 2018

Hmm, interesting that the release notes would include that! Does the provided demo work for you? https://master-origin-loadcss.fgview.com/test/preload.html

It seems to operate fine for me on an iPhone X and iPhone 8 Plus running iOS 11.

Are you saying this is only limited to stylesheets that are using font-display: swap?

@leonmondria

This comment has been minimized.

Show comment
Hide comment
@leonmondria

leonmondria May 3, 2018

The demo works like a charm, seems that the combination preload + swap is 'fatal' on iphone 6 + ios 11.3.
If the stylesheet is included with it does work (GO APPLE).

If you run the css through https://jigsaw.w3.org/css-validator/ that will also fail so maybe the swapping does some sort of validation in that IOS/iphone combo?

Anyway, now it's a known problem so if i get customer questions, i tell them to update their phone.

leonmondria commented May 3, 2018

The demo works like a charm, seems that the combination preload + swap is 'fatal' on iphone 6 + ios 11.3.
If the stylesheet is included with it does work (GO APPLE).

If you run the css through https://jigsaw.w3.org/css-validator/ that will also fail so maybe the swapping does some sort of validation in that IOS/iphone combo?

Anyway, now it's a known problem so if i get customer questions, i tell them to update their phone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment