IE makes two indents instead of one

I have some JS code that implements a typewriter effect. However, if everything works fine on google chrome, then in IE why additional indents appear.

In the console in chrome there are 2 indents in ie 3, why is it always one more, is this a bug?

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:

Google Chrome

Internet Explorer 11:

Internet Explorer 11

Answer

I’m in favor of CBroe’s comment. It gets rn in IE which makes the issue. If you replace rn with n, then it can work well in IE and Chrome.

You can use the following method to replace rn with n:

text = text.replace(/(?:\[rn]|[rn]+)+/g, "n");

Result in IE 11:

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *