Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async CSS loading is broken in Firefox 77

See original GitHub issue

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.

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:8 (4 by maintainers)

Top GitHub Comments

2reactions

developitcommented, Jun 10, 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.

2reactions

developitcommented, May 27, 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';
    }
}