[Firefox] Remove background-color from transition property list of …

…form control mixin (#1927)
elastic · May 7, 2019 · 3289ac1 · 3289ac1
1 parent d332537
commit 3289ac1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `10.4.0`
+**Bug fixes**
+
+- Fixed Firefox flash of unstyled select dropdown ([#1927](https://github.com/elastic/eui/pull/1927))
 
 ## [`10.4.0`](https://github.com/elastic/eui/tree/v10.4.0)
 

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -93,9 +93,16 @@
 
   transition:
     box-shadow $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in,
     background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in;
+    background-size $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
+
+  // Fixes bug in Firefox where adding a transition to the background-color
+  // caused a flash of differently styled dropdown.
+  @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes
+    // List *must* be in the same order as the above.
+    transition-property: box-shadow, background-image, background-size;
+  }
 }
 
 @mixin euiFormControlFocusStyle($borderOnly: false) {