IE 11 делает дополнительные оступы

Question

Есть скрипт, который реализует эффект пишущей машинки. Все работает хорошо, однако в IE 11, почему то появляются дополнительные отступы, хотя к примеру в гугл хроме все нормально.

По консоли видно, что когда у хрома 2 отступа, то в IE почему то 3. Ниже приложу код и изображение этой "фичи".

Есть идеи как это можно исправить?

let textBox = document.querySelector('.index-title-main h1'),
    text    = textBox.innerText,
    newHTML = '';

for(i = 0; i < text.length; i++){
    newHTML += '<span>'+text[i]+'</span>';
}
textBox.innerHTML = newHTML;

let spans   = textBox.querySelectorAll('span'),
    count   = 0,
    timeout = 0;

function typing_text(){
    spans[count].classList.add('visible');
    if(spans[count].innerText == '\n' || spans[count].innerHTML == '\n'){
        timeout = Math.floor(Math.random() * Math.floor(1000));
        spans[count-1].classList.add('cursor');
    
    }else{
        timeout = 150;
    }

    if (count < text.length - 1){
        setTimeout(function() {
            Array.prototype.forEach.call(spans, function (e) {
                e.classList.remove('cursor'); 
             }); 
            count ++;
            typing_text();
        }, timeout);
    }
}

typing_text();

body{
 background-color: #000;
}
.index-title-main{
  color: #fff;
  font-size: 25px;
  height: 290px;
  white-space: pre-wrap;
}
/* Animation */
.index-title-main h1 span {
    visibility: hidden;
}
.index-title-main h1 span.visible {
    visibility: visible;
}
.index-title-main h1 span.cursor {
    background: #34DEB4;
    width: 2px;
    animation: blinking 0.5s step-start infinite;
}

<div class="index-title-main"><h1>Text 1 <br>Text 2, <br>Text 3</h1></div>

Google Chrome:

Internet Explorer 11:

БЛОГ НА HUSL

IE 11 делает дополнительные оступы

Ответы (0 шт):