Fix slider padding and whitespace issue on Safari (#1669)

Shopify · Aug 23, 2022 · 215f8d6 · 215f8d6
1 parent 4558947
commit 215f8d6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1166,8 +1166,9 @@ summary::-webkit-details-marker {
     margin-left: 1.5rem;
   }
 
-  .grid--peek.slider .grid__item:last-of-type {
-    margin-right: 1.5rem;
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .grid--peek.slider:after {
+    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
   }
 
   .grid--2-col-tablet-down .grid__item {
@@ -1203,10 +1204,6 @@ summary::-webkit-details-marker {
     margin-left: 1.5rem;
   }
 
-  .slider--tablet.grid--peek .grid__item:last-of-type {
-    margin-right: 1.5rem;
-  }
-
   .grid--2-col-tablet-down .grid__item {
     width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
   }

diff --git a/assets/component-slider.css b/assets/component-slider.css
@@ -47,6 +47,13 @@ slider-component.slider-component-full-width {
     margin-bottom: 1rem;
   }
 
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider--mobile:after {
+    content: "";
+    width: 0;
+    padding-left: 1.5rem;
+  }
+
   .slider.slider--mobile .slider__slide {
     margin-bottom: 0;
     padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
@@ -90,6 +97,14 @@ slider-component.slider-component-full-width {
     margin-bottom: 1rem;
   }
 
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider--tablet:after {
+    content: "";
+    width: 0;
+    padding-left: 1.5rem;
+    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
+  }
+
   .slider.slider--tablet .slider__slide {
     margin-bottom: 0;
     padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
@@ -136,6 +151,14 @@ slider-component.slider-component-full-width {
     scroll-padding-left: var(--desktop-margin-left-first-item);
   }
 
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider--desktop:after {
+    content: "";
+    width: 0;
+    padding-left: 5rem;
+    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
+  }
+
   .slider.slider--desktop .slider__slide {
     margin-bottom: 0;
     padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
@@ -147,10 +170,6 @@ slider-component.slider-component-full-width {
     scroll-margin-left: var(--desktop-margin-left-first-item);
   }
 
-  .slider.slider--desktop .slider__slide:last-child {
-    margin-right: 5rem;
-  }
-
   .slider-component-full-width .slider--desktop {
     scroll-padding-left: 1.5rem;
   }
@@ -160,8 +179,9 @@ slider-component.slider-component-full-width {
     scroll-margin-left: 1.5rem;
   }
 
-  .slider-component-full-width .slider--desktop .slider__slide:last-child {
-    margin-right: 1.5rem;
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider-component-full-width .slider--desktop:after {
+    padding-left: 1.5rem;
   }
 
   .slider--desktop.grid--5-col-desktop .grid__item {

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -535,12 +535,6 @@ a.product__text {
   display: block;
 }
 
-@media screen and (max-width: 749px) {
-  .product__media-item--variant:first-child {
-    padding-right: 1.5rem;
-  }
-}
-
 @media screen and (min-width: 750px) and (max-width: 989px) {
   .product__media-list .product__media-item:first-child {
     padding-left: 0;
@@ -983,6 +977,11 @@ a.product__text {
   grid-gap: 1rem;
 }
 
+/* Fix to show some space at the end of our sliders in all browsers to be applied on thumbnails */
+.slider--mobile.thumbnail-list:after {
+  content: none;
+}
+
 @media screen and (min-width: 750px) {
   .product--stacked .thumbnail-list {
     display: none;