progress bar width set via scale instead of width for perf

hakimel · hakimel · commit df61f9e1fab4 · 2020-05-20T10:42:55.000+02:00
diff --git a/css/reveal.scss b/css/reveal.scss
@@ -567,10 +567,12 @@ $controlsArrowAngleActive: 36deg;
 	.reveal .progress span {
 		display: block;
 		height: 100%;
-		width: 0px;
+		width: 100%;
 
 		background-color: currentColor;
-		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		transform-origin: 0 0;
+		transform: scaleX(0);
 	}
 
 /*********************************************
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
@@ -299,9 +299,6 @@
 	background: rgba(0,0,0,0.2);
 	color: $linkColor;
 }
-	.reveal .progress span {
-		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	}
 
 /*********************************************
  * PRINT BACKGROUND
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.js b/dist/reveal.js
diff --git a/dist/theme/beige.css b/dist/theme/beige.css
@@ -281,9 +281,6 @@
   background: rgba(0, 0, 0, 0.2);
   color: #8b743d; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/black.css b/dist/theme/black.css
@@ -277,9 +277,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
   background: rgba(0, 0, 0, 0.2);
   color: #42affa; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/blood.css b/dist/theme/blood.css
@@ -280,9 +280,6 @@
   background: rgba(0, 0, 0, 0.2);
   color: #a23; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/league.css b/dist/theme/league.css
@@ -283,9 +283,6 @@
   background: rgba(0, 0, 0, 0.2);
   color: #13DAEC; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/moon.css b/dist/theme/moon.css
@@ -281,9 +281,6 @@ html * {
   background: rgba(0, 0, 0, 0.2);
   color: #268bd2; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/night.css b/dist/theme/night.css
@@ -275,9 +275,6 @@
   background: rgba(0, 0, 0, 0.2);
   color: #e7ad52; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/serif.css b/dist/theme/serif.css
@@ -277,9 +277,6 @@
   background: rgba(0, 0, 0, 0.2);
   color: #51483D; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/simple.css b/dist/theme/simple.css
@@ -280,9 +280,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   background: rgba(0, 0, 0, 0.2);
   color: #00008B; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/sky.css b/dist/theme/sky.css
@@ -284,9 +284,6 @@
   background: rgba(0, 0, 0, 0.2);
   color: #3b759e; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/solarized.css b/dist/theme/solarized.css
@@ -281,9 +281,6 @@ html * {
   background: rgba(0, 0, 0, 0.2);
   color: #268bd2; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/dist/theme/white.css b/dist/theme/white.css
@@ -277,9 +277,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   background: rgba(0, 0, 0, 0.2);
   color: #2a76dd; }
 
-.reveal .progress span {
-  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
-
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
diff --git a/js/controllers/progress.js b/js/controllers/progress.js
@@ -55,7 +55,7 @@ export default class Progress {
 		// Update progress if enabled
 		if( this.Reveal.getConfig().progress && this.bar ) {
 
-			this.bar.style.width = this.Reveal.getProgress() * this.getMaxWidth() + 'px';
+			this.bar.style.transform = 'scaleX('+ this.Reveal.getProgress() +')';
 
 		}
 

Original file line number	Diff line number	Diff line change
`@@ -299,9 +299,6 @@`
`299`	`299`	`background: rgba(0,0,0,0.2);`
`300`	`300`	`color: $linkColor;`
`301`	`301`	`}`
`302`		`- .reveal .progress span {`
`303`		`- transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);`
`304`		`- }`
`305`	`302`
`306`	`303`	`/*********************************************`
`307`	`304`	`* PRINT BACKGROUND`