BCTHEME-190 Content should not scroll in two directions when zoomed (#…

…1853)

Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>

CHANGELOG.md

@@ -1,9 +1,9 @@
 # Changelog
 
 ## Draft
+- Content should not scroll in two directions when zoomed. [#1853](https://github.com/bigcommerce/cornerstone/pull/1853)
 - Notification of number of products not announced. [#1845](https://github.com/bigcommerce/cornerstone/pull/1845)
-- Quick search query param needs to be fixed while navigating to search page. [#230](https://jira.bigcommerce.com/browse/BCTHEME-230)
-- Quick search query param needs to be fixed while navigating to search page. [#230](https://jira.bigcommerce.com/browse/BCTHEME-230)
+- Quick search query param needs to be fixed while navigating to search page. [#1832](https://github.com/bigcommerce/cornerstone/pull/1832)
 - Zooming and scaling must not be disabled. [#1843](https://github.com/bigcommerce/cornerstone/pull/1843)
 - Options on change modal need focus border. [#1839](https://github.com/bigcommerce/cornerstone/pull/1839)
 - Product cards should link to products. [#1842](https://github.com/bigcommerce/cornerstone/pull/1842)

assets/scss/components/stencil/productView/_productView.scss

@@ -119,10 +119,17 @@
 
 // Details
 // -----------------------------------------------------------------------------
+//
+// 1. for Androind Chrome and IE with zoom horizontal scroll fix
+//
+// -----------------------------------------------------------------------------
 
 .productView-details {
     padding-bottom: spacing("single") + spacing("third");
-    overflow: hidden; // for Androind Chrome horizontal scroll fix
+
+    &.product-options {
+        overflow: hidden; // 1
+    }
 }
 
 

templates/components/products/product-view.html

@@ -215,7 +215,7 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
         </div>
     </section>
 
-    <section class="productView-details">
+    <section class="productView-details product-options">
         <div class="productView-options">
             {{#if product.release_date }}
                 <p>{{product.release_date}}</p>