Preact-cli: Async CSS loading is broken in Firefox 77

Created on 27 May 2020 · 8Comments · Source: preactjs/preact-cli

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.

Source

sampotts

👍4

Most helpful comment

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.

developit on 10 Jun 2020

👍2

All 8 comments

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

sampotts on 27 May 2020

cc @developit

prateekbh on 27 May 2020

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';
    }
}

developit on 28 May 2020

👍2

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.

sampotts on 28 May 2020

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

developit on 28 May 2020

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

sampotts on 28 May 2020

also 75, and mobile versions of firefox

Inviz on 10 Jun 2020

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.

developit on 10 Jun 2020

👍2

Was this page helpful?

0 / 5 - 0 ratings