Semantic-Org/Semantic-UI-React

Modal: horizontal jump when opening/closing modal

Open

Aperta il 5 giu 2019

Vedi su GitHub
 (2 commenti) (0 reazioni) (0 assegnatari)JavaScript (13.136 star) (4065 fork)batch import
help wantedneeds engineering

Descrizione

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);
}

Guida contributor