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

Open on Drupal.org →

Created on 19 November 2024, 4 months ago

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.

🐛 Bug report

Status

Active

Version

2.0

Component

User interface

Created by

🇨🇦Canada ambient.impact Toronto

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Merge Requests

!11Turbo: Reduce or eliminate FOUC due to stylesheet being merged in and removed
Merged
🇨🇦Canada ambient.impact
updated 3 months ago

Comments & Activities

Issue created by @ambient.impact
Merge request !11Issue #3488459: Reduced/eliminated FOUC during Turbo loads. → (Merged) created by ambient.impact
Comment 3 months ago →
System Message

ambient.impact → committed d1a50d8b on 2.x
Issue #3488459: Removed data-turbo-track from CSS: Now that we have...
Comment 3 months ago →
System Message

ambient.impact → committed e0ec31ba on 2.x
Issue #3488459: Added update hook and incremented Turbo patch version.
Comment 3 months ago →
System Message

ambient.impact → committed 66c3afb3 on 2.x
Issue #3488459: Stylesheet sorter transfers weights if existing.
Comment 3 months ago →
System Message

ambient.impact → committed ff6b8d22 on 2.x
Issue #3488459: Disable data-turbo-track for CSS for now.
Comment 3 months ago →
System Message

ambient.impact → committed 32dabe33 on 2.x
Issue #3488459: Output weight attribute for CSS even when aggregating.
Comment 3 months ago →
System Message

ambient.impact → committed 7b5c4073 on 2.x
Issue #3488459: Patched Turbo to add styleshee events.
Comment 3 months ago →
🇨🇦Canada ambient.impact Toronto
After some significant work and testing, I think I've basically fixed FOUC under most circumstances.
Comment 3 months ago →
System Message
Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024