fix(storefront): BCTHEME-268 Update carousel images to improve LCP in…

…dicator from Lighthouse performance report
bigcommerce · Oct 20, 2020 · 4d5e294 · 4d5e294
1 parent 0564704
commit 4d5e294
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Update carousel images to improve LCP indicator from Lighthouse performance report. [#1876](https://github.com/bigcommerce/cornerstone/pull/1876)
 - Unified browsers list that we support. [#1836](https://github.com/bigcommerce/cornerstone/pull/1836)
 - Bump stencil utils and update hooks to account for refactor to drop Jquery in stencil utils [#1821](https://github.com/bigcommerce/cornerstone/pull/1821)
 

diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
@@ -19,18 +19,17 @@
     margin-bottom: (spacing("double") + spacing("single"));
     margin-top: -(spacing("single")); // 3
     overflow: hidden;
-    visibility: hidden;
+    opacity: 0;
 
     &.is-visible {
-        visibility: visible;
+        opacity: 1;
     }
 
     @include breakpoint("medium") {
         margin-top: -(spacing("single") + spacing("base")); // 3
     }
 
     &.slick-initialized {
-        opacity: 1;
         max-height: 100vh;
 
         @include breakpoint("small") {