Menu icon Foundation
Scrollbar page jump on reveal open

I developed a couple of sites using Foundation 5 and didn't encounter the issue that I'm now having with Foundation 6.

If you go to http://dominet.ca/eq/how-it-works.html and click on the "See the Doctor" button, a modal opens, and it looks fine to me, but some people who have been testing out this page are complaining that the page is shifting to the right when the reveal modal opens.

I know this page shift when the scrollbar appears is as old as web development itself, and there isn't much you can do about it on the page level, but why is the modal causing this to happen?

Is there something I can do to prevent the page shift from happening when the modal opens?

revealmodalshiftpagescrollbars

I developed a couple of sites using Foundation 5 and didn't encounter the issue that I'm now having with Foundation 6.

If you go to http://dominet.ca/eq/how-it-works.html and click on the "See the Doctor" button, a modal opens, and it looks fine to me, but some people who have been testing out this page are complaining that the page is shifting to the right when the reveal modal opens.

I know this page shift when the scrollbar appears is as old as web development itself, and there isn't much you can do about it on the page level, but why is the modal causing this to happen?

Is there something I can do to prevent the page shift from happening when the modal opens?

Rafi Benkual over 3 years ago

Hmm, what browser and OS is it reported on. I'm on Chrome and a Mac so I didn't see it happen.

John L over 3 years ago

I'm on a PC, and the jump can be seen in both Firefox and Chrome.

This seems to be new to Foundation 6 because I developed two websites in Foundation 5 and didn't observe this behavior with the modals.

Adrian Jefferies over 3 years ago

When the reveal opens the body tag gets a class of is-reveal-open - which has the property overflow: hidden.

So add the following to your custom style.css:

body.is-reveal-open {
overflow: visible;
}

For good measure, add this so you don't get the extra scrollbar:

.reveal-overlay {
overflow-y: hidden;
}

John L over 3 years ago

Thanks Adrian, your fix worked perfectly.

I think this fix will be helpful to a lot of people, at least until Foundation 6 is released with this as its default behavior.