MC-5419: Background Attachment Fixed Does Not Work In Mobile Android or iPhone on Storefront

- turn off background-attachment fixed in mobile due to partial device support
- add test coverage for existing test

Author: anthoula

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBackgroundFormAttributeTests.xml

@@ -3235,6 +3235,7 @@
             <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
         </before>
         <after>
+            <resizeWindow width="1280" height="1024" stepKey="resizeWindowToDesktop"/>
             <actionGroup ref="navigateToMediaGallery" stepKey="navigateToMediaGallery"/>
             <actionGroup ref="NavigateToMediaFolderActionGroup" stepKey="NavigateToFolder">
                 <argument name="FolderName" value="{{PageBuilderBackgroundImage_JPG.path}}"/>
@@ -3311,5 +3312,13 @@
             <argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
             <argument name="pageNamePrefix" value="banner"/>
         </actionGroup>
+        <resizeWindow width="767" height="1000" stepKey="resizeWindowToMobile"/>
+        <!-- Storefront: Check Background Attachment Mobile -->
+        <comment userInput="Storefront: Check Background Attachment Mobile" stepKey="commentStorefrontCheckMobile"/>
+        <executeJS function="return jQuery({{BannerOnFrontend.wrapperJS('1')}}).css('background-attachment')" stepKey="assignedBackgroundAttachment" />
+        <assertEquals stepKey="assertEqualToEnteredValue">
+            <expectedResult type="string">{{PageBuilderBackgroundAttachment_Scroll.value}}</expectedResult>
+            <actualResult type="variable">$assignedBackgroundAttachment</actualResult>
+        </assertEquals>
     </test>
 </tests>

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less

@@ -65,6 +65,8 @@
 
 @media only screen and (max-width: @screen__m) {
     .pagebuilder-banner-wrapper {
+        background-attachment: scroll !important;
+
         .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
             max-width: none;
         }

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/column/_default.less

@@ -11,8 +11,13 @@
     box-sizing: border-box;
 }
 
+//
+//  Responsive Classes
+//  _____________________________________________
+
 @media only screen and (max-width: @screen__m) {
     .pagebuilder-column {
+        background-attachment: scroll !important;
         flex-basis: 100%;
     }
 }

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_contained.less

@@ -17,3 +17,15 @@
         box-sizing: border-box;
     }
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='row'][data-appearance='contained'] {
+        [data-element='inner'] {
+            background-attachment: scroll !important;
+        }
+    }
+}

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_full-bleed.less

@@ -10,3 +10,13 @@
 [data-role='row'][data-appearance='full-bleed'] {
     box-sizing: border-box;
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='row'][data-appearance='full-bleed'] {
+        background-attachment: scroll !important;
+    }
+}

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_full-width.less

@@ -18,3 +18,13 @@
         width: 100%;
     }
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='row'][data-appearance='full-width'] {
+        background-attachment: scroll !important;
+    }
+}

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/tabs/_default.less

@@ -102,3 +102,13 @@ div[data-role='tabs'] {
         }
     }
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='tab-item'] {
+        background-attachment: scroll !important;
+    }
+}