Problem/Motivation

Flash of unstyled content occurs some of the time, especially when the server is a bit too slow to respond, and is even worse with CSS aggregation enabled when removing unused stylesheets only to add the new aggregates that contain a lot of the same styles.

See https://github.com/hotwired/turbo/issues/1131

Steps to reproduce

See above.

Proposed resolution

We've patched Turbo to delay removing stylesheets if rendering is paused (e.g. for a page transition), but this is left up to the theme to do; perhaps this is an argument for adding a transition and delay by default and allowing themes or other modules to opt out if desired?

Remaining tasks

TBD.

User interface changes

No more FOUC.

API changes

None?

Data model changes

None.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ambient.impact created an issue. See original summary.

  • ambient.impact committed d1a50d8b on 2.x
    Issue #3488459: Removed data-turbo-track from CSS:
    
    Now that we have...

  • ambient.impact committed e0ec31ba on 2.x
    Issue #3488459: Added update hook and incremented Turbo patch version.
    

  • ambient.impact committed 32dabe33 on 2.x
    Issue #3488459: Output weight attribute for CSS even when aggregating.
    

ambient.impact’s picture

Status: Active » Fixed

After some significant work and testing, I think I've basically fixed FOUC under most circumstances.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

ambient.impact’s picture

Title: Turbo: Reduce or eliminate FOUC due to stylesheet being merged in and removed » Turbo: Reduce or eliminate FOUC due to stylesheets being merged in and removed