Issue #3488464: Progress bar back to width transition; rounding errors.

components/progress-bar/progress-bar.css

@@ -46,7 +46,7 @@
   /**
    * Progress bar value transition.
    */
-  --refreshless-progress-bar-value-transition: transform var(
+  --refreshless-progress-bar-value-transition: width var(
     --refreshless-progress-bar-transition-duration
   ) ease-out;
 
@@ -100,17 +100,12 @@
 
   z-index: var(--refreshless-progress-bar-z-index);
 
-  transition:
-    var(--refreshless-progress-bar-opacity-transition-out);
+  transition: var(--refreshless-progress-bar-opacity-transition-out);
 
   opacity: 0;
 
   background-color: var(--refreshless-progress-bar-empty-colour);
 
-  /* Hopefully prevents any unexpected horizontal scrollbars due to translating
-     the filled portion of the progress bar. */
-  overflow: hidden;
-
 }
 
 /* We're using ::before on the container rather than attempting to style and
@@ -126,30 +121,37 @@
 
   top:    0;
   bottom: 0;
-  left:   0;
-  right:  0;
+
+  /* We're using width because our calculated percent-based value seems to have
+     unexpected behaviour in Firefox/Gecko (December 2024) with transforms,
+     both scale and translate, where the progress bar will move forward a bit
+     and then back a bit before moving forward again. This may be due to Gecko
+     rounding the value in some way while Chromium/Blink does not appear to
+     exhibit this problem. Width seems performant enough on mobile even without
+     it being a GPU accelerated property, likely due to how simple the progress
+     bar is. */
+  width: var(--refreshless-progress-bar-computed-value);
 
   background-color: var(--refreshless-progress-bar-filled-colour);
 
   transition: var(--refreshless-progress-bar-value-transition);
 
-  transform: translateX(
-    calc(var(--refreshless-progress-bar-computed-value) - 100%)
-  );
+  will-change: opacity, width;
 
 }
 
+:root[dir=ltr] .refreshless-document-progress-bar::before {
+  left: 0;
+}
+
 :root[dir=rtl] .refreshless-document-progress-bar::before {
-  transform: translateX(
-    calc(100% - var(--refreshless-progress-bar-computed-value))
-  );
+  right: 0;
 }
 
 .refreshless-document-progress-bar--active {
 
   opacity: 1;
 
-  transition:
-    var(--refreshless-progress-bar-opacity-transition-in);
+  transition: var(--refreshless-progress-bar-opacity-transition-in);
 
 }