Switch Turbo progress bar animation from width to compositor-friendly transform: scaleX(...)

CHANGELOG.md

@@ -1,3 +1,7 @@
 # Changelog
 
 Please see [our GitHub "Releases" page](https://github.com/hotwired/turbo/releases).
+
+## Unreleased
+
+- `.turbo-progress-bar` now renders at full width and uses `transform: scaleX(...)` for progress animation. Custom overrides that animate or read `width` should migrate to `transform`.

src/core/drive/progress_bar.ts

@@ -10,13 +10,16 @@ export class ProgressBar {
         display: block;
         top: 0;
         left: 0;
+        width: 100%;
         height: 3px;
         background: #0076ff;
         z-index: 2147483647;
+        transform-origin: 0 0;
+        transform: scaleX(0) translateZ(0);
         transition:
-          width ${ProgressBar.animationDuration}ms ease-out,
+          transform ${ProgressBar.animationDuration}ms ease-out,
           opacity ${ProgressBar.animationDuration / 2}ms ${ProgressBar.animationDuration / 2}ms ease-in;
-        transform: translate3d(0, 0, 0);
+        will-change: transform, opacity;
       }
     `
   }
@@ -68,7 +71,7 @@ export class ProgressBar {
   }
 
   installProgressElement() {
-    this.progressElement.style.width = "0"
+    this.progressElement.style.transform = "scaleX(0) translateZ(0)"
     this.progressElement.style.opacity = "1"
     document.documentElement.insertBefore(this.progressElement, document.body)
     this.refresh()
@@ -102,7 +105,8 @@ export class ProgressBar {
 
   refresh() {
     requestAnimationFrame(() => {
-      this.progressElement.style.width = `${10 + this.value * 90}%`
+      const scale = (10 + this.value * 90) / 100
+      this.progressElement.style.transform = `scaleX(${scale}) translateZ(0)`
     })
   }
 

src/tests/functional/form_submission_tests.ts

@@ -38,6 +38,11 @@ test("test standard form submission renders a progress bar", async ({ page }) =>
 
   await waitUntilSelector(page, ".turbo-progress-bar")
   assert.ok(await hasSelector(page, ".turbo-progress-bar"), "displays progress bar")
+  assert.match(
+    await page.locator(".turbo-progress-bar").evaluate((element) => (element as HTMLDivElement).style.transform),
+    /^scaleX\(.+\) translateZ\(0(px)?\)$/,
+    "animates progress with transform"
+  )
 
   await nextBody(page)
   await waitUntilNoSelector(page, ".turbo-progress-bar")

src/tests/functional/navigation_tests.ts

@@ -38,6 +38,11 @@ test("test navigating renders a progress bar", async ({ page }) => {
 
   await waitUntilSelector(page, ".turbo-progress-bar")
   assert.ok(await hasSelector(page, ".turbo-progress-bar"), "displays progress bar")
+  assert.match(
+    await page.locator(".turbo-progress-bar").evaluate((element) => (element as HTMLDivElement).style.transform),
+    /^scaleX\(.+\) translateZ\(0(px)?\)$/,
+    "animates progress with transform"
+  )
 
   await nextEventNamed(page, "turbo:load")
   await waitUntilNoSelector(page, ".turbo-progress-bar")