From 5dec7f3710b465bb5db6f1489980b12888e15fd6 Mon Sep 17 00:00:00 2001
From: Matei Stanca <i@ambientimpact.com>
Date: Thu, 5 Dec 2024 13:47:18 -0500
Subject: [PATCH] Issue #3488464: Progress bar back to width transition;
rounding errors.
---
components/progress-bar/progress-bar.css | 36 +++++++++++++-----------
1 file changed, 19 insertions(+), 17 deletions(-)
diff --git a/components/progress-bar/progress-bar.css b/components/progress-bar/progress-bar.css
index 0cd74cd..d3f8418 100644
--- a/components/progress-bar/progress-bar.css
+++ b/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);
}
--
GitLab