Проблема рендеринга Microsoft Edge с прокручиваемым div

Question

У меня есть интересная проблема CSS / рендеринга с Microsoft Edge и прокручиваемым контентом в div, для которого я пытаюсь найти обходной путь.

Если окно браузера Edge начинается с достаточно малого размера, поэтому полоса прокрутки div необходима немедленно, тогда большую часть (!) Времени полоса прокрутки будет отображаться правильно, как показано ниже:

Однако, если размер окна браузера изменяется или содержимое в div изменяется так, что требуется полоса прокрутки, рендеринг полосы прокрутки и родительского div выполняется неправильно, как показано ниже:

До сих пор я наблюдал только эту проблему в Edge, так что поверьте, что это особенность Edge.

Вот URL-адрес, если вы хотите попробовать его: https://www.topomap.co.nz/#ShareMap

CSS для div:

.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. В настоящее время я портирую сайт с Google Maps на Leaflet, что дало мне возможность заметить, что проблема рендеринга, по-видимому, захватывает статический снимок любого содержимого, находящегося в div, когда возникает проблема.

В результате я подал сообщение об ошибке в Microsoft: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17459668/

Снимок экрана ниже демонстрирует проблему рендеринга: