[LinearProgress] Use transform instead width (#7732)

Use transform:scaleX for better performance on Buffer and Determinate modes
mui · Aug 11, 2017 · 03e70a1 · 03e70a1
1 parent 36e9434
commit 03e70a1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/Progress/LinearProgress.js b/src/Progress/LinearProgress.js
@@ -39,11 +39,13 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
     backgroundPosition: '0px -23px',
   },
   bar: {
+    width: '100%',
     position: 'absolute',
     left: 0,
     bottom: 0,
     top: 0,
     transition: 'transform 0.2s linear',
+    transformOrigin: 'left',
   },
   dashed: {
     position: 'absolute',
@@ -53,7 +55,7 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
     animation: 'buffer 3s infinite linear',
   },
   bufferBar2: {
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
   },
   rootBuffer: {
     backgroundColor: 'transparent',
@@ -71,19 +73,19 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
     animationDelay: '1.15s',
   },
   determinateBar1: {
-    willChange: 'width',
-    transition: `width .${transitionDuration}s linear`,
+    willChange: 'transform',
+    transition: `transform .${transitionDuration}s linear`,
   },
   bufferBar1: {
     zIndex: 1,
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
   },
   bufferBar2Primary: {
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
     backgroundColor: theme.palette.primary[100],
   },
   bufferBar2Accent: {
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
     backgroundColor: theme.palette.accent.A100,
   },
   '@keyframes mui-indeterminate1': {
@@ -167,11 +169,11 @@ function LinearProgress(props) {
   const rootProps = {};
 
   if (mode === 'determinate') {
-    styles.primary.width = `${value}%`;
+    styles.primary.transform = `scaleX(${value / 100})`;
     rootProps['aria-valuenow'] = Math.round(value);
   } else if (mode === 'buffer') {
-    styles.primary.width = `${value}%`;
-    styles.secondary.width = `${valueBuffer}%`;
+    styles.primary.transform = `scaleX(${value / 100})`;
+    styles.secondary.transform = `scaleX(${valueBuffer / 100})`;
   }
 
   return (

diff --git a/src/Progress/LinearProgress.spec.js b/src/Progress/LinearProgress.spec.js
@@ -129,7 +129,11 @@ describe('<LinearProgress />', () => {
   it('should set width of bar1 on determinate mode', () => {
     const wrapper = shallow(<LinearProgress mode="determinate" value={77} />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.childAt(0).props().style.width, '77%', 'should have width set');
+    assert.strictEqual(
+      wrapper.childAt(0).props().style.transform,
+      'scaleX(0.77)',
+      'should have width set',
+    );
     assert.strictEqual(wrapper.props()['aria-valuenow'], 77);
   });
 
@@ -226,8 +230,16 @@ describe('<LinearProgress />', () => {
   it('should set width of bar1 and bar2 on buffer mode', () => {
     const wrapper = shallow(<LinearProgress mode="buffer" value={77} valueBuffer={85} />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.childAt(1).props().style.width, '77%', 'should have width set');
-    assert.strictEqual(wrapper.childAt(2).props().style.width, '85%', 'should have width set');
+    assert.strictEqual(
+      wrapper.childAt(1).props().style.transform,
+      'scaleX(0.77)',
+      'should have width set',
+    );
+    assert.strictEqual(
+      wrapper.childAt(2).props().style.transform,
+      'scaleX(0.85)',
+      'should have width set',
+    );
   });
 
   it('should render with query classes', () => {