Skip to content

Commit

Permalink
Prevent page scroll jumping when product gallery loads
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Mateusz Krzeszowiak committed Oct 30, 2019
1 parent 2cc9d29 commit 0b278c8
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 4 deletions.
4 changes: 0 additions & 4 deletions lib/web/fotorama/fotorama.js
Original file line number Diff line number Diff line change
Expand Up @@ -3272,13 +3272,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') {
Expand Down
2 changes: 2 additions & 0 deletions lib/web/mage/gallery/gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down

0 comments on commit 0b278c8

Please sign in to comment.