Skip to content

Commit 0b278c8

Browse files
author
Mateusz Krzeszowiak
committed
Prevent page scroll jumping when product gallery loads
During the investigation of the issue linked below I was able to pinpoint the exact moment of scroll jumping to fotorama's `that.resize` function which for some reason resets all of its major elements' width and height dimensions. I analysed the code and concluded that since current element height seems to be completely ignored in the whole script and is only set either based on settings or its width and ratio, the code that resets it can be removed. Please not that this can be also true for width but I left it here just to be safe as it doesn't contribute to page jumping. In addition, `min-height` was added to prevent initial jump of the gallery when static image is being replaced by fotorama's HTML. Fixes #10518.
1 parent 2cc9d29 commit 0b278c8

File tree

2 files changed

+2
-4
lines changed

2 files changed

+2
-4
lines changed

lib/web/fotorama/fotorama.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3272,13 +3272,9 @@ fotoramaVersion = '4.6.4';
32723272

32733273
if (measureIsValid(width)) {
32743274
$wrap.css({width: ''});
3275-
$wrap.css({height: ''});
32763275
$stage.css({width: ''});
3277-
$stage.css({height: ''});
32783276
$stageShaft.css({width: ''});
3279-
$stageShaft.css({height: ''});
32803277
$nav.css({width: ''});
3281-
$nav.css({height: ''});
32823278
$wrap.css({minWidth: measures.minwidth || 0, maxWidth: measures.maxwidth || MAX_WIDTH});
32833279

32843280
if (o_nav === 'dots') {

lib/web/mage/gallery/gallery.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,10 +291,12 @@ define([
291291
config.click = false;
292292
config.breakpoints = null;
293293
settings.currentConfig = config;
294+
settings.$element.css('min-height', settings.$element.height());
294295
settings.$element.html(tpl);
295296
settings.$element.removeClass('_block-content-loading');
296297
settings.$elementF = $(settings.$element.children()[0]);
297298
settings.$elementF.fotorama(config);
299+
settings.$element.css('min-height', '');
298300
settings.fotoramaApi = settings.$elementF.data('fotorama');
299301
$.extend(true, config, this.startConfig);
300302

0 commit comments

Comments
 (0)