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.

Sign up for GitHub

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

Jump to bottom

Async CSS loading is broken in Firefox 77 #1199

Closed
sampotts opened this issue May 27, 2020 · 8 comments · Fixed by #1235
Closed

Async CSS loading is broken in Firefox 77 #1199

sampotts opened this issue May 27, 2020 · 8 comments · Fixed by #1235
Projects
Preact-cli 3.0

Comments

@sampotts
Copy link

sampotts commented May 27, 2020 •
edited

Do you want to request a feature or report a bug?

This is a bug. It seems to be resolved in Firefox nightly but at this moment it's broken on the v77 beta build of Firefox. It could be a beta issue, if someone could test on stable that'd be awesome. As a workaround I've just locked the version at 3.0.0-rc.9 in our projects.

What is the current behaviour?

The stylesheet loaded via the new technique introduced in 3.0.0-rc.13 is broken on Firefox 77.

Prior to 3.0.0-rc.13 stylesheets were loaded like this:

<head>
  <link href="/bundle.css" rel="preload" as="style">
</head>
<body>
  ...
  <link rel="stylesheet" href="/bundle.css">
</body>

In 3.0.0-rc.13 they are now loaded with the following snippet:

<link href="/bundle.css" rel="preload" as="style" onload="this.rel='stylesheet'" />

If the current behaviour is a bug, please provide the steps to reproduce.

A test case is here:
https://jsfiddle.net/6gnwvfoe/

If the font stays as the default browser serif font, then you're experiencing the issue. Chrome and Safari seem fine.

What is the expected behaviour?

The stylesheet loads as normal.
@sampotts
Copy link
Author

Looks like there's a Mozilla issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=1626997

Some more info here:
https://twitter.com/Sam_Potts/status/1265446870790230016?s=20

@prateekbh
Copy link
Member

cc @developit

@developit
Copy link
Member

Ah! Yikes. Here's a workaround you can throw in your preact.config.js:

// preact.config.js
export default function(config, env, helpers) {
    const critters = helpers.getPluginsByName(config, 'Critters')[0];
    if (critters) {
        // The default strategy in Preact CLI is "media",
        // but there are 6 different loading techniques:
        // https://github.com/GoogleChromeLabs/critters#preloadstrategy
        critters.plugin.options.preload = 'body';
    }
}

@sampotts
Copy link
Author

sampotts commented May 27, 2020 •
edited

Awesome, cheers! I imagine the fix will flow down from the nightly build soon.

Also, if you check the twitter thread, Scott mentions a newer method that might be worth a look.

@developit
Copy link
Member

For my own curiosity - was this issue present in any Firefox mainline versions?

@sampotts
Copy link
Author

I just checked 76.0.1 (stable) on another machine and it was the same as 77, i.e. broken.

@rschristian rschristian mentioned this issue May 29, 2020
Closed
@prateekbh prateekbh added this to Blocker For launch in Preact-cli 3.0 Jun 8, 2020
@Inviz
Copy link

Inviz commented Jun 10, 2020

also 75, and mobile versions of firefox

@developit developit mentioned this issue Jun 10, 2020
Merged
@developit
Copy link
Member

I opened a PR to revert back to the old behavior. The preload:"swap" output is measurably faster, but if it breaks a whole browser I don't think we can make the tradeoff yet.

@prateekbh prateekbh moved this from Blocker For launch to Done in Preact-cli 3.0 Jun 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
No open projects
Preact-cli 3.0
  
Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix CSS preloading in Firefox preactjs/preact-cli
4 participants
@Inviz @developit @sampotts @prateekbh