Процессор прыгает при прокрутке div в Chrome

Question

Я получаю очень длинную строку с сервера, которая содержит теги text и html, и я отображаю эту строку в прокручиваемом элементе div. Когда я щелкаю мышью по полосе прокрутки и перетаскиваю ее, она прекрасно прокручивается, но когда я использую колесико мыши, она едва перемещается, и процессор переходит на 60-100.

вот div css:

background-color: #000;
    white-space: pre-wrap;
    padding: 0 20px 10px 20px;
    margin: 10px 0 10px;
    font-size: 14px;
    color: #dfe3eb;
    cursor: text;
    overflow: auto;
    min-height: 400px;
    height: calc(100vh - 316px);
    line-height: 1.4;
    will-change: transform;

Я заметил, что если я удаляю white-space: pre-wrap;, производительность будет намного лучше, но мне это нужно, поскольку я хочу визуализировать пробелы / новые строки.

Я попытался добавить will-change: transform;, но этоне помогло, есть идеи?