ENGCOM-6376: Prevent page scroll jumping when product gallery loads #25385

Author: slavvka

dev/tests/js/jasmine/tests/lib/mage/gallery/gallery.test.js

@@ -0,0 +1,105 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+    'mage/gallery/gallery',
+    'jquery'
+], function (Gallery, $) {
+    'use strict';
+
+    var gallery,
+        options,
+        element,
+        jqueryDataMock,
+        originSpy;
+
+    beforeEach(function () {
+        options = {
+            options: {
+                allowfullscreen: true,
+                arrows: true,
+                height: 700,
+                keyboard: true,
+                loop: true,
+                nav: 'thumbs',
+                navarrows: true,
+                navdir: 'horizontal',
+                navtype: 'slides',
+                showCaption: false,
+                thumbheight: 110,
+                thumbwidth: 88,
+                transition: 'slide',
+                transitionduration: 500,
+                width: 700
+            },
+            fullscreen: {
+                arrows: true,
+                loop: true,
+                nav: 'thumbs',
+                navarrows: false,
+                navdir: 'horizontal',
+                navtype: 'slides',
+                showCaption: false,
+                transition: 'slide',
+                transitionduration: 500
+            },
+            breakpoints: {
+                mobile: {}
+            },
+            data: [
+                {
+                    caption: 'Simple product',
+                    isMain: true,
+                    position: '1',
+                    type: 'image',
+                    videoUrl: null,
+                    thumb: '',
+                    full: '',
+                    img: ''
+                }
+            ],
+            magnifierOpts: {
+                enabled: false,
+                eventType: 'hover',
+                fullscreenzoom: '20',
+                height: 100,
+                largeWrapper: '[data-gallery-role=\'magnifier\']',
+                left: 10,
+                mode: 'outside',
+                thumb: '.fotorama__img',
+                top: 10,
+                width: 100,
+                zoomable: false
+            }
+        };
+        element = $('<div class="gallery-placeholder' +
+            ' _block-content-loading" data-gallery-role="gallery-placeholder">' +
+            '<img alt="main product photo" class="gallery-placeholder__image" src="">' +
+            '</div>');
+    });
+
+    describe('"initGallery" method', function () {
+        it('Verify gallery initialization', function () {
+            originSpy = $.fn.data;
+            jqueryDataMock = {
+                setOptions: jasmine.createSpy().and.returnValue(true),
+                updateOptions: jasmine.createSpy().and.returnValue(true)
+            };
+            spyOn($.fn, 'data').and.callFake(function () {
+                return jqueryDataMock;
+            });
+
+            gallery = new Gallery(options, element);
+            expect(gallery.settings.$elementF.class).toBe(element[1]);
+            expect(gallery.settings.fullscreenConfig).toBeDefined();
+            expect(gallery.settings.fotoramaApi).toBeDefined();
+            expect(gallery.settings.data).toBeDefined();
+            expect(gallery.settings.api).toBeDefined();
+
+            $.fn.data = originSpy;
+        });
+    });
+});

lib/web/fotorama/fotorama.js

@@ -3275,13 +3275,9 @@ fotoramaVersion = '4.6.4';
 
             if (measureIsValid(width)) {
                 $wrap.css({width: ''});
-                $wrap.css({height: ''});
                 $stage.css({width: ''});
-                $stage.css({height: ''});
                 $stageShaft.css({width: ''});
-                $stageShaft.css({height: ''});
                 $nav.css({width: ''});
-                $nav.css({height: ''});
                 $wrap.css({minWidth: measures.minwidth || 0, maxWidth: measures.maxwidth || MAX_WIDTH});
 
                 if (o_nav === 'dots') {

lib/web/mage/gallery/gallery.js

@@ -291,10 +291,12 @@ define([
             config.click = false;
             config.breakpoints = null;
             settings.currentConfig = config;
+            settings.$element.css('min-height', settings.$element.height());
             settings.$element.html(tpl);
             settings.$element.removeClass('_block-content-loading');
             settings.$elementF = $(settings.$element.children()[0]);
             settings.$elementF.fotorama(config);
+            settings.$element.css('min-height', '');
             settings.fotoramaApi = settings.$elementF.data('fotorama');
             $.extend(true, config, this.startConfig);