Setting overflow-y: hidden; causes the page to jump to the top in Firefox
Solution 1
Don't use overflow: hidden on html, only on body.
I had the same problem but fixed it by removing html.
Instead :
$('body, html').css('overflow', 'hidden');
Do :
$('body').css('overflow', 'hidden');
Solution 2
I had the same issue after checking it in the inspector window, I noticed that in the reset CSS, HTML is set to
HTML {
overflow-y: scroll;
}
you can fix this by setting it to
HTML {
overflow-y: initial;
}
If you don't want to touch reset CSS or just comment it
plugin and code is absolutely fine
Solution 3
change modal position from absolute to fixed:
#mymodal {
position: fixed
}
Runcible
Updated on June 03, 2022Comments
-
Runcible about 2 years
I've got some javascript which handles opening modal popups on my website, and it also sets the
overflow-yproperty on the<html>element tohidden. In Chrome and IE this works as expected - the scrollbar hides, and the page behind the modal popup remains in the same scroll position. When the popup is closed,overflow-yis set toscrolland the page is in the same state and position as before.However in Firefox, as soon as
overflow-yis changed tohiddenthe page scroll position jumps to the very top, and so when the popup is closed the view has changed for the user - not ideal.The problem can be seen on this jsfiddle
Is there any solution for this behaviour?