Modal: horizontal jump when opening/closing modal
#3642 opened on Jun 5, 2019
Description
Bug Report
Steps
When opening or closing a modal in a document with a vertical scrollbar you'll receive a horizontal jump of the page because the scrollbar gets hidden and the viewport's width increases.
Expected Result
The whitespace of the scrollbar (if present) gets catched by adding padding-right to the body.
Actual Result
The scrollbar disappears and the viewport's width increases causing an horizontal jump/glitch.
Version
0.86.0
Failing workaround
I tried to fix it myself by imitating the scrollbar whitespace but I can't seem to get the exact moment when the scrollbar appears (when modal closes), causing it to sometimes execute a tiny bit too late and still having a jump back and forth.
Applying the whitespace when the scrollbar disappears (when modal opens) is not a problem, that works.
Video demo: https://cl.ly/ae1df12517c9
The code to make it happen:
handleOpen = () => {
const padding = window.innerWidth - document.documentElement.clientWidth;
document.body.style.paddingRight = `${padding}px`;
}
/* This one sometimes gets executed too late */
handleClose = () => {
setTimeout(() => {
document.body.style.paddingRight = '';
}, 200);
}