Position stage instead of image for more stable layout

Author: Mateusz Krzeszowiak

lib/web/mage/gallery/gallery.js

@@ -272,8 +272,8 @@ define([
                 }),
                 mainImageIndex,
                 $element = settings.$element,
-                $placeholderImage = $element.find('.gallery-placeholder__image'),
-                $fotoramaElement;
+                $fotoramaElement,
+                $fotoramaStage;
 
             if (settings.breakpoints) {
                 _.each(_.values(settings.breakpoints), function (breakpoint) {
@@ -297,25 +297,25 @@ define([
             );
             settings.currentConfig = config;
 
-            // Adjust wrapper and placeholder styling just before initializing the gallery.
-            $placeholderImage.css({
-                position: 'absolute',
-                left: '50%',
-                transform: 'translateX(-50%)'
-            });
             $element
                 .css('min-height', settings.$element.height())
                 .append(tpl);
 
             $fotoramaElement = $element.find('[data-gallery-role="gallery"]');
+
+            $fotoramaStage = $fotoramaElement.find('.fotorama__stage');
+            $fotoramaStage.css('position', 'absolute');
+
             $fotoramaElement.fotorama(config);
             $fotoramaElement.find('.fotorama__stage__frame.fotorama__active')
                     .one('f:load', function () {
                         // Remove placeholder when main gallery image loads.
-                        $placeholderImage.remove();
+                        $element.find('.gallery-placeholder__image').remove();
                         $element
                             .removeClass('_block-content-loading')
                             .css('min-height', '');
+
+                        $fotoramaStage.css('position', '');
                     });
             settings.$elementF = $fotoramaElement;
             settings.fotoramaApi = $fotoramaElement.data('fotorama');