fix: workaround for chrome bug with bottom app bar background

Author: hperrin

packages/bottom-app-bar/_mixins.scss

@@ -32,6 +32,7 @@ $acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
       display: flex;
       flex-direction: row;
       justify-content: center;
+      position: relative;
       padding: $section-padding-vertical $section-padding-horizontal;
       height: $section-height;
       box-sizing: border-box;
@@ -134,6 +135,61 @@ $acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
   .smui-bottom-app-bar--fixed-adjust {
     padding-bottom: $section-height;
   }
+
+  /*
+  "What the fuck is this nonsense?" (I hear you asking after reading the
+  following styles.)
+  
+  That's a great question.
+
+  In Google Chrome (the worst browser now that IE is dead), the background style
+  on the bar sections doesn't get applied, so the bar is... just transparent.
+  Super weird. BUUUT, if an animation runs inside the bar (like a ripple on
+  button click), the background is rendered again.
+
+  "Well why not just run the animation once on component load?"
+
+  Also a great quesiton.
+
+  Even if the background is rendered, if it is scrolled *down* to below the
+  fold, then scrolled back into view, it will be transparent again.
+
+  "Won't this have an impact on power consumption/battery life?"
+
+  Yes.
+  */
+  @supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and
+    (not (-moz-appearance: none)) {
+    // ^ That supports query makes this only apply to Chromium based
+    // browsers. (Chrome, Edge, Brave, etc.)
+    .smui-bottom-app-bar.smui-bottom-app-bar--standard
+      > .smui-bottom-app-bar__section::after,
+    .smui-bottom-app-bar.smui-bottom-app-bar--fixed
+      > .smui-bottom-app-bar__section::after {
+      display: block;
+      content: ' ';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      height: 10px;
+      width: 10px;
+      pointer-events: none;
+      background-color: #000;
+      opacity: 0;
+      animation: 60s linear 0s infinite chrome-fix;
+    }
+    @keyframes chrome-fix {
+      0% {
+        bottom: 0;
+      }
+      50% {
+        bottom: $section-height - 10px;
+      }
+      100% {
+        bottom: 0px;
+      }
+    }
+  }
 }
 
 @mixin inset-color($color, $xpos, $query: feature-targeting.all()) {

packages/bottom-app-bar/src/AutoAdjust.svelte

@@ -51,7 +51,11 @@
 
   $: propStore = bottomAppBar && bottomAppBar.getPropStore();
   $: adjustClass = (() => {
-    if (!propStore || $propStore.variant === 'static') {
+    if (
+      !propStore ||
+      $propStore.variant === 'standard' ||
+      $propStore.variant === 'static'
+    ) {
       return '';
     }
 

packages/site/src/routes/demo/bottom-app-bar/+page.svelte

@@ -7,7 +7,7 @@
 
   <h5>Installation</h5>
 
-  <pre class="demo-spaced">npm i -D @smui/bottom-app-bar</pre>
+  <pre class="demo-spaced">npm i -D @smui-extra/bottom-app-bar</pre>
 
   <h5>Demos</h5>
 
@@ -20,7 +20,10 @@
 
   <Demo
     component={Variants}
-    files={['bottom-app-bar/iframe/fixed/+page.svelte']}
+    files={[
+      'bottom-app-bar/iframe/standard/+page.svelte',
+      'bottom-app-bar/iframe/fixed/+page.svelte',
+    ]}
   >
     Page level bottom app bars
     <svelte:fragment slot="subtitle">

packages/site/src/routes/demo/bottom-app-bar/iframe/inset-fab-right/+page.svelte

@@ -38,7 +38,7 @@
 
 <style>
   /* Hide everything above this component. */
-  :global(app),
+  :global(#smui-app),
   :global(body),
   :global(html) {
     display: block !important;

packages/site/src/routes/demo/bottom-app-bar/iframe/inset-fab/+page.svelte

@@ -38,7 +38,7 @@
 
 <style>
   /* Hide everything above this component. */
-  :global(app),
+  :global(#smui-app),
   :global(body),
   :global(html) {
     display: block !important;

packages/site/src/routes/demo/bottom-app-bar/iframe/standard/+page.svelte

@@ -32,7 +32,7 @@
 
 <style>
   /* Hide everything above this component. */
-  :global(app),
+  :global(#smui-app),
   :global(body),
   :global(html) {
     display: block !important;

packages/site/src/routes/demo/top-app-bar/iframe/dense/+page.svelte

@@ -41,7 +41,7 @@
 
 <style>
   /* Hide everything above this component. */
-  :global(app),
+  :global(#smui-app),
   :global(body),
   :global(html) {
     display: block !important;

packages/site/src/routes/demo/top-app-bar/iframe/fixed/+page.svelte

@@ -41,7 +41,7 @@
 
 <style>
   /* Hide everything above this component. */
-  :global(app),
+  :global(#smui-app),
   :global(body),
   :global(html) {
     display: block !important;

packages/site/src/routes/demo/top-app-bar/iframe/prominent/+page.svelte

@@ -41,7 +41,7 @@
 
 <style>
   /* Hide everything above this component. */
-  :global(app),
+  :global(#smui-app),
   :global(body),
   :global(html) {
     display: block !important;

packages/site/src/routes/demo/top-app-bar/iframe/short-closed/+page.svelte

@@ -36,7 +36,7 @@
 
 <style>
   /* Hide everything above this component. */
-  :global(app),
+  :global(#smui-app),
   :global(body),
   :global(html) {
     display: block !important;