Microsoft Edge渲染问题与可滚动div

Question

我有一个有趣的CSS /渲染问题与Microsoft Edge和divs中的可滚动内容，我正试图找到解决方法。

如果Edge浏览器窗口启动得足够小，立即需要div滚动条，那么滚动条的大部分时间（！）将正确呈现，如下所示：

但是，如果调整浏览器窗口大小或div中的内容发生更改以便需要滚动条，则滚动条和父div的呈现操作不正确，如下所示：

到目前为止，我只在Edge中观察过这个问题，所以相信它只是Edge的特殊性。

如果您想尝试一下，请输入以下网址：https://www.topomap.co.nz/#ShareMap

div的CSS是：

.sidebar-scrollable-area {
    position: absolute;
    width: 235px;
    top: 38px;
    bottom: 0px;
    overflow: auto;
    padding-right: 15px;
    padding-top: 15px;
}

将overflow设置为auto或scroll会导致出现同样的问题。

有没有人有任何想法我可以尝试作为修复/解决方法？

Answer 1

我相信这是一个Edge特定的渲染错误。我目前正在将该网站从谷歌地图移植到Leaflet，这让我有机会观察到渲染问题似乎捕获了问题发生时div下任何内容的静态快照。

结果我向微软提交了一份错误报告： https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17459668/

下面的屏幕截图演示了渲染问题：