[EuiProgress] Fix broken transition CSS (#7538)

elastic · Feb 21, 2024 · c2dbd57 · c2dbd57
1 parent 8cc0fec
commit c2dbd57
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/changelogs/upcoming/7538.md b/changelogs/upcoming/7538.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed missing animation on native `EuiProgress` bar update
diff --git a/src/components/progress/progress.styles.ts b/src/components/progress/progress.styles.ts
@@ -10,6 +10,7 @@ import { css, keyframes } from '@emotion/react';
 import {
   logicalCSS,
   logicalTextAlignCSS,
+  euiCanAnimate,
   euiCantAnimate,
   euiFontSize,
   euiTextTruncate,
@@ -105,9 +106,13 @@ export const euiProgressStyles = (
       background-color: ${euiTheme.colors.lightShade};
     }
 
-    ${crossBrowserProgressValue(
-      'transition: width ${euiTheme.animation.normal} linear;'
-    )}
+    ${euiCanAnimate} {
+      /* Note: FF/Mozilla doesn't actually support animating the native progress bar
+        @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */
+      ${crossBrowserProgressValue(
+        `transition: width ${euiTheme.animation.normal} linear`
+      )}
+    }
   `,
   // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
   // we apply this style to a <div> instead of a <progress> element.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed missing animation on native `EuiProgress` bar update