React项目出现垂直滚动条时页面显示异常<hr>线条的问题求助

页面出现了一条异常线条，可查看下图：

如果我移除表格，使页面不再出现垂直滚动条，这条线条也会随之消失：

已尝试的排查操作 #

• 检查html、body、React根div是否设置了height:100%，确认未设置该属性
• 使用浏览器元素检查工具排查该线条是否为可删除的hr或其他DOM元素，确认不属于页面渲染的元素节点
• 目前唯一想到的可能方案是移除左右padding来覆盖该线条，但不确定是否可行

相关代码 #

return (
    <React.Fragment>
        <Navbar/>
        <section className="container__ide">
            <div className="container__settings">
                <Tooltip title={'调整文本编辑器的字体大小'} placement="left">
                    <Select
                        value={codeFontSize}
                        onChange={handleChangeFontSize}
                        MenuProps={{
                            anchorOrigin: {
                                vertical: "bottom",
                                horizontal: "left"
                            },
                            transformOrigin: {
                                vertical: "top",
                                horizontal: "left"
                            },
                            getContentAnchorEl: null
                        }}
                    >
                        {
                            selectFontSizeOptions.map((fontSize) => {
                                return <MenuItem key={fontSize} value={fontSize}>{fontSize} px</MenuItem>
                            })
                        }
                    </Select>
                </Tooltip>
                <Button>
                    <FaBug/>
                </Button>
            </div>
            <div className="container__problem">
                <div className="container__statement">
                    <div className="container__top__statement">
                        <span>描述</span>
                    </div>
                    <div className="container__inner__statement"></div>
                </div>
                <div className="container__code">
                    <div className="container__top__code">
                        <span>解决方案</span>
                        <button>运行代码</button>
                    </div>
                    <div className="container__inner__code">
                        <Editor
                            height="300px"
                            defaultLanguage="sql"
                            defaultValue="// some comment"
                            theme="my-theme"
                            fontSize="20px"
                            onMount={handleEditorOnMount}
                        />
                    </div>
                </div>
            </div>
            <div className="container__result">
                <MaterialTable
                    columns={[
                        { title: '名', field: 'name' },
                        { title: '姓', field: 'surname' },
                        { title: '出生年份', field: 'birthYear', type: 'numeric' },
                        { title: '出生地', field: 'birthCity', lookup: { 34: '伊斯坦布尔', 63: '尚勒乌尔法' } }
                    ]}
                    data={[
                        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 34 },
                        { name: 'Mehmet', surname: 'Baran', birthYear: 1988, birthCity: 42 },
                        { name: 'Mehmet', surname: 'Baran', birthYear: 1989, birthCity: 63 },
                        { name: 'Mehmet', surname: 'Baran', birthYear: 1989, birthCity: 63 }
                    ]}
                    title="演示标题"
                    icons={tableIcons}
                />
            </div>
            <div className="container__comments">
                <button>添加评论</button>
            </div>
        </section>
    </React.Fragment>
)

解决方案 #

根因说明 #

这条异常线条属于浏览器滚动条渲染的兼容bug，触发原因是页面出现垂直滚动条时，容器宽度计算和滚动条占位宽度不匹配，导致父容器背景色从1px的缝隙漏出，不属于真实DOM节点，所以无法通过元素选择器定位。

修复方案按优先级排序： #

1. 给外层容器container__ide添加overflow-x: hidden属性，直接屏蔽横向的1px溢出
2. 显式给container__ide设置box-sizing: border-box，同时全局重置默认的margin和padding，避免盒模型计算误差
3. 给外层容器添加1px和页面背景同色的边框，或者设置transform: translateZ(0)强制开启GPU渲染，规避亚像素偏移问题
4. 你提到的移除左右padding的方案也可生效，只要让容器内容宽度刚好覆盖滚动条旁边的缝隙即可
5. 如果是浏览器默认滚动条宽度计算异常导致的，可以手动固定滚动条宽度：

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

内容的提问来源于stack exchange，提问作者Alin Apetrei