Semantic-Org/Semantic-UI-React

Modal: horizontal jump when opening/closing modal

Open

#3,642 创建于 2019年6月5日

在 GitHub 查看
 (2 评论) (0 反应) (0 负责人)JavaScript (4,065 fork)batch import
help wantedneeds engineering

仓库指标

Star
 (13,136 star)
PR 合并指标
 (30 天内没有已合并 PR)

描述

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

贡献者指南