hakimel#3678 : Made the progress bar use width instead of scaleX

Saucistophe · Sep 9, 2024 · 1374762 · 1374762
1 parent 4725350
commit 1374762
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 13 deletions.
diff --git a/css/reveal.scss b/css/reveal.scss
@@ -585,12 +585,10 @@ $controlsArrowAngleActive: 36deg;
 	.reveal .progress span {
 		display: block;
 		height: 100%;
-		width: 100%;
+		width: 0%;
 
 		background-color: currentColor;
-		transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		transform-origin: 0 0;
-		transform: scaleX(0);
+		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}
 
 /*********************************************

diff --git a/dist/reveal.css b/dist/reveal.css
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.esm.js.map b/dist/reveal.esm.js.map
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/dist/reveal.js.map b/dist/reveal.js.map
diff --git a/js/controllers/progress.js b/js/controllers/progress.js
@@ -62,8 +62,7 @@ export default class Progress {
 				scale = 0;
 			}
 
-			this.bar.style.transform = 'scaleX('+ scale +')';
-
+			this.bar.style.width =  `${scale * 100}vw`;
 		}
 
 	}

diff --git a/package-lock.json b/package-lock.json
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,8 +62,7 @@ export default class Progress { @@
     				scale = 0;
     			}
-    			this.bar.style.transform = 'scaleX('+ scale +')';
+    			this.bar.style.width =  `${scale * 100}vw`;
     		}
     	}
@@ Expand Down @@