Improve search hiding (#309)

* Clean up search menu transitions

* Actually fix the safari issue

It seems like attribute changes on the host element do not trigger a
restyle.  However, class changes do. This changes the search hiding to
rely on a class toggle. The interesting thing is that just toggling the
class, even while having the styles depend on the attribute, triggers a
restyle and fixes the issue.

It looks like this is a bug in WebKit. Good luck getting it fixed.

* build

components/byu-header/byu-header-common.scss

@@ -178,12 +178,15 @@
     padding: 0;
 }
 
+$menuTransitionTiming: 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
+$menuTransition: max-height $menuTransitionTiming;
 
 /* MOBILE */
 
 @mixin mobileMenu() {
   max-height: 0;
-  transition: 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
+  transition: $menuTransition;
+  will-change: max-height;
 }
 
 @mixin mobileHeaderContent() {
@@ -272,17 +275,19 @@
 }
 
 @mixin searchTransition() {
-  transform: scaleY(1);
-  transition: height .1s ease-in-out;
-  height: 35px!important;
+  max-height: 35px;
+  transition: $menuTransition, transform $menuTransitionTiming;
+  will-change: max-height, transform;
+  overflow: hidden;
+  transform: scale(1, 1);
   transform-origin: top;
 }
 
 @mixin searchTransformed() {
-  transform: scaleY(0);
-  height: 0 !important;
-}
+  max-height: 0;
+  transform: scale(1, 0);
 
+}
 
 /* FULL SIZE */
 

components/byu-header/byu-header.js

@@ -169,9 +169,11 @@ class BYUHeader extends HTMLElement {
         if (!menu) return;
         if (this.menuOpen) {
             menu.style.maxHeight = menu.scrollHeight + 'px';
+            this.classList.add('byu-header-menu-open');
             transformIcon(this.shadowRoot.querySelector('.mobile-menu-button'));
         } else {
             menu.style.maxHeight = null;
+            this.classList.remove('byu-header-menu-open');
             revertIcon(this.shadowRoot.querySelector('.mobile-menu-button'));
         }
     }

components/byu-header/byu-header.scss

@@ -171,7 +171,7 @@
   @include searchTransition();
 }
 
-:host([menu-open][mobile-view]) .byu-header-search {
+:host(.byu-header-menu-open[mobile-view]) .byu-header-search {
   @include searchTransformed();
 }