jquery-match-height icon indicating copy to clipboard operation
jquery-match-height copied to clipboard

Firefox jumps to top of page on browser reload

Open Toutouwai opened this issue 8 years ago • 4 comments

When doing a browser reload jquery-match-height causes Firefox (v45, Windows) to jump to the top of the page rather than maintaining the current scroll position. Chrome and IE are not affected.

jquery-match-height does not even need to be called on Dom ready to trigger this issue - the behaviour occurs by just linking to the jquery-match-height script.

Not sure if this is the same issue as reported here.

Toutouwai avatar Apr 15 '16 01:04 Toutouwai

Have you set:

$.fn.matchHeight._maintainScroll = true;

As for why it happens on page load, I assume you apply matchHeight on load? Firefox is generally pretty bad at maintaining scroll position natively, when you have lots of elements that change height. It may also be down to a particular layout you have though, so it will be hard to test without an example.

liabru avatar Apr 15 '16 09:04 liabru

~~Example here: http://run.plnkr.co/cFqF6IWCF2hzGoRX/~~ Edit: seems I can't link directly to the Plunker preview. Try the "Launch Fullscreen" button here instead.

Scroll down to the bottom and then do a browser reload - in Firefox the page jumps up to around the top of the matched height columns. So the issue is not actually a jump to the top of the page - it just looked that way because in my real project the matched height items are the main layout columns.

In the example I don't explicitly call matchHeight on page load, but I realise now that including a data-mh attribute on elements triggers matchHeight even without an explicit Dom ready call.

Another interesting point: the jump only occurs when the matched height columns are visible in the viewport. Do a reload when the columns are below the viewable area and the jump issue does not occur.

The maintainScroll option shouldn't be necessary as no content is added dynamically and the jump occurs on reload rather than viewport resize. No jump occurs in Chrome or IE, only Firefox. And adding the maintainScroll option doesn't fix the issue in any case.

Toutouwai avatar Apr 15 '16 23:04 Toutouwai

Thanks for the update. Looks like the issue is that maintainScroll doesn't work on page refresh as Firefox doesn't set the scroll position back to the bottom immediately.

A solution seems to be to apply matchHeight after a small delay instead of using the data api:

$(function() {
    $.fn.matchHeight._maintainScroll = true;
    setTimeout(function() {
        $('.col').matchHeight();
    }, 1);
});

If other people have this issue, I might add a _dataApiDelay option or similar to handle this.

liabru avatar Apr 25 '16 10:04 liabru

Thanks. Is a timeout solution possible when using data-mh attributes?

Toutouwai avatar May 04 '16 03:05 Toutouwai