Contrib.social

Turbo: Chrome on Android still encounters brief style shifting during RefreshLess loads

Open on Drupal.org →
Created on 16 January 2025, 3 months ago

Problem/Motivation

We're still seeing some unexpected layout shifting in Chrome on Android during page transitions on Omnipedia, despite the issue being completely fixed in Firefox on Android and a non-issue on all desktop browsers. The likely culprit is that aggregated CSS is being appended to the <head> by Turbo before the transitions have started:

document.head.appendChild(element);

which means they may load and apply their styles before the page has been hidden by the transion.

Steps to reproduce

See above.

Proposed resolution

We have two main options:

  1. Use LoadJS to load them and only insert them once they've all loaded; the library is already included in core and used for various things like the Ajax system.
  2. We can keep the current Turbo code but try inserting the links using the rel="preload" as="style" attributes to have them load without being applied, and only applying them all as rel="stylesheet" in one go when all have loaded. This will need some testing to verify that it results in reliable load events across major browsers.

Remaining tasks

See above.

User interface changes

Less layout shifting and styles being applied/unapplied.

API changes

None probably.

Data model changes

None.

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇨🇦Canada ambient.impact Toronto

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024