gh-574 Fix Safari/FF browser overlay issue

* Remove .fade css animation from styles (main cause of issue)
* Add web-animations-js polyfill so that web animations work in Safari
  - needed by the busy module so that fade-ins/outs still work
* Fixes the issues in Safari and Firefox

Author: ghillert

ui/package.json

@@ -40,6 +40,7 @@
     "spring-flo": "0.7.0",
     "stompjs": "2.3.3",
     "tixif-ngx-busy": "0.0.5",
+    "web-animations-js": "2.3.1",
     "zone.js": "0.8.18",
     "jshint": "2.9.5"
   },

ui/src/polyfills.ts

@@ -46,7 +46,7 @@ import 'core-js/es7/reflect';
  * Required to support Web Animations `@angular/animation`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
 

ui/src/styles.scss

@@ -67,16 +67,6 @@ table.table {
   position: unset;
 }
 
-@keyframes fade {
-  0%  { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-.fade {
-  animation: fade ease-in-out 1s;
-  animation-fill-mode: forwards;
-}
-
 .vertical-center {
   background-color: #232b2f;
   min-height: 100%;  /* Fallback for browsers do NOT support vh unit */