fix(app): fix step meter tearing during wizard flows (#13920)

Add the ODD optimizations to prevent step meter tearing that occurs when pressing "Go Back" during various flows.
Opentrons · Nov 6, 2023 · c15d30e · c15d30e
1 parent 916a061
commit c15d30e
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/app/src/atoms/StepMeter/index.tsx b/app/src/atoms/StepMeter/index.tsx
@@ -32,15 +32,21 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
  height: ${SPACING.spacing12};
  }
  `
+
+ const ODD_ANIMATION_OPTIMIZATIONS = `
+ backface-visibility: hidden;
+ perspective: 1000;
+ will-change: transform;
+ `
+
  const StepMeterBar = css`
+ ${ODD_ANIMATION_OPTIMIZATIONS}
  position: ${POSITION_ABSOLUTE};
  top: 0;
  height: 100%;
  background-color: ${COLORS.blueEnabled};
  width: ${percentComplete};
- webkit-transition: width 0.5s ease-in-out;
- moz-transition: width 0.5s ease-in-out;
- o-transition: width 0.5s ease-in-out;
+ transform: translateX(0);
  transition: width 0.5s ease-in-out;
  `