fix(css changes): positioning issues fixed where lottie was overflowi…

…ng out of container background on seeker of controls was white on firefox. changed to be transparent
LottieFiles · Oct 26, 2021 · 965823c · 965823c
1 parent 905c6ab
commit 965823c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lottiefiles/lottie-player",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Lottie animation and Telegram Sticker player web components.",
   "main": "dist/lottie-player.js",
   "module": "dist/lottie-player.esm.js",

diff --git a/src/index.html b/src/index.html
@@ -10,15 +10,16 @@
   </head>
 
   <body>
-    <div>
+    <div style="height: 600px; background-color: beige">
       <lottie-player
         id="player0"
         autoplay
         controls
         loop
         speed="1"
         mode="normal"
-        src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json"
+        style="width: 100%"
+        src="https://assets5.lottiefiles.com/packages/lf20_tl5nafup.json"
       >
       </lottie-player>
     </div>

diff --git a/src/lottie-player.styles.ts b/src/lottie-player.styles.ts
@@ -24,30 +24,25 @@ export default css`
   }
 
   .main {
-    box-sizing: border-box;
-    grid-auto-columns: auto;
-    grid-template-rows: auto;
-    position: relative;
-    height: inherit;
-    width: inherit;
-  }
-
-  .main.controls {
-    grid-template-rows: 1fr var(--lottie-player-toolbar-height);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
   }
 
   .animation {
-    overflow: hidden;
-    height: calc(1fr - var(--lottie-player-toolbar-height));
+    width: 100%;
+    height: calc(100% - 35px);
+    display: flex;
   }
 
   .toolbar {
-    display: grid;
-    grid-template-columns: 32px 32px 1fr 32px;
+    display: flex;
     align-items: center;
     justify-items: center;
     background-color: var(--lottie-player-toolbar-background-color);
     margin: 0 5px;
+    height: 35px;
   }
 
   .toolbar button {
@@ -80,6 +75,7 @@ export default css`
     -webkit-appearance: none;
     width: 95%;
     outline: none;
+    background-color: var(--lottie-player-toolbar-background-color);
   }
 
   .seeker::-webkit-slider-runnable-track {