From b491d0b45583c3c74d6cacab83382de76ead5ed6 Mon Sep 17 00:00:00 2001
From: Patrick Edelman <patrick.edelman@bigcommerce.com>
Date: Thu, 11 Oct 2018 20:01:10 -0700
Subject: [PATCH] MERC-4196: Fixes issue with Slick slider for mobile safari

---
 .gitignore                                    |  1 +
 CHANGELOG.md                                  |  1 +
 .../stencil/heroCarousel/_heroCarousel.scss   |  2 ++
 .../productCarousel/_productCarousel.scss     |  2 ++
 templates/components/products/carousel.html   | 27 ++-----------------
 5 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6d44c07cf1..9a2eb85755 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ assets/js/bundle.js
 assets/dist
 *.js.map
 *.zip
+.idea/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f03ea44dbf..869810a98b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Draft
 - Product review modal error message is now accurate. [#1370](https://github.com/bigcommerce/cornerstone/pull/1370)
+- Fixes issue with Slick slider for mobile safari in iframe [#1371](https://github.com/bigcommerce/cornerstone/pull/1371)
 
 ## 2.5.1 (2018-10-10)
 - Fix broken breadcrumb schema markup [#1362](https://github.com/bigcommerce/cornerstone/pull/1362)
diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
index 8af00c526c..83d64e442d 100644
--- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
+++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
@@ -18,6 +18,8 @@
 // -----------------------------------------------------------------------------
 
 .heroCarousel {
+    width: 1px;
+    min-width: 100%;
     margin-bottom: (spacing("double") + spacing("single"));
     margin-top: -(spacing("single")); // 3
 
diff --git a/assets/scss/components/stencil/productCarousel/_productCarousel.scss b/assets/scss/components/stencil/productCarousel/_productCarousel.scss
index d59b210f48..d6866c61fd 100644
--- a/assets/scss/components/stencil/productCarousel/_productCarousel.scss
+++ b/assets/scss/components/stencil/productCarousel/_productCarousel.scss
@@ -9,6 +9,8 @@
 // -----------------------------------------------------------------------------
 
 .productCarousel { // 1
+    width: 1px;
+    min-width: 100%;
     @include grid-row(
         $behavior: nest
     );
diff --git a/templates/components/products/carousel.html b/templates/components/products/carousel.html
index 699e657927..27677f7c69 100644
--- a/templates/components/products/carousel.html
+++ b/templates/components/products/carousel.html
@@ -3,31 +3,8 @@
         "dots": true,
         "infinite": false,
         "mobileFirst": true,
-        "slidesToShow": 2,
-        "slidesToScroll": 2,
-        "responsive": [
-            {
-                "breakpoint": 1260,
-                "settings": {
-                    "slidesToScroll": 3,
-                    "slidesToShow": {{ columns }}
-                }
-            },
-            {
-                "breakpoint": 800,
-                "settings": {
-                    "slidesToScroll": 3,
-                    "slidesToShow": 5
-                }
-            },
-            {
-                "breakpoint": 550,
-                "settings": {
-                    "slidesToScroll": 3,
-                    "slidesToShow": 3
-                }
-            }
-        ]
+        "slidesToShow": {{ columns }},
+        "slidesToScroll": 3
     }'
 >
     {{#each products}}