jsテキストローテータの幽霊の境界Chromeブラウザ

Question

何らかの理由で、私のテキストローテーターが、幽霊 - 幻影の境界線を上に、時には左に表示します。この問題はChromeブラウザでのみ発生します.FirefoxとSafariで確認してみるとすばらしく見えます。

Chromeブラウザのみで表示されるこのファントムの境界を修正するにはどうすればよいですか？

Codepen example here

var TxtRotate = function(el, toRotate, period, speed) { 
 
    this.toRotate = toRotate; 
 
    this.el = el; 
 
    this.loopNum = 0; 
 
    this.period = parseInt(period, 10) || 2000; 
 
    this.txt = ''; 
 
    this.tick(); 
 
    this.speed = parseInt(speed, 10) || 300; 
 
    this.isDeleting = false; 
 
}; 
 

 
TxtRotate.prototype.tick = function() { 
 
    var i = this.loopNum % this.toRotate.length; 
 
    var fullTxt = this.toRotate[i]; 
 

 
    if (this.isDeleting) { 
 
     this.txt = fullTxt.substring(0, this.txt.length - 1); 
 
    } else { 
 
     this.txt = fullTxt.substring(0, this.txt.length + 1); 
 
    } 
 

 
    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; 
 

 
    var that = this; 
 
    var delta = this.speed - Math.random() * 100; 
 

 
    if (this.isDeleting) { delta /= 2; } 
 

 
    if (!this.isDeleting && this.txt === fullTxt) { 
 
     setTimeout(function(){ 
 
      delta = that.period; 
 
      that.isDeleting = true; 
 
     },2000); 
 

 
    } else if (this.isDeleting && this.txt === '') { 
 
     this.isDeleting = false; 
 
     this.loopNum++; 
 
     delta = 500; 
 
    } 
 

 
    setTimeout(function() { 
 
     that.tick(); 
 
    }, delta); 
 
}; 
 

 
window.onload = function() { 
 
    var elements = document.getElementsByClassName('txt-rotate'); 
 
    for (var i=0; i<elements.length; i++) { 
 
     var toRotate = elements[i].getAttribute('data-rotate'); 
 
     var period = elements[i].getAttribute('data-period'); 
 
     var speed = elements[i].getAttribute('data-speed'); 
 
     if (toRotate) { 
 
      new TxtRotate(elements[i], JSON.parse(toRotate), period, speed); 
 
     } 
 
    } 
 
};

body { 
 
    background: #1e1f20; 
 
    color: #f6f6f6; 
 
    font-size: 16px; 
 
} 
 

 
body h1 { 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 2.5rem; 
 
    font-weight: 300; 
 
} 
 

 
body .container { 
 
    max-width: 800px; 
 
    text-align: center; 
 
    margin: 50px auto; 
 
}

<div class="container"> 
 
    <h1>Linux Quotes: <span class="txt-rotate" data-period="150" data-speed="100" data-rotate="[ &quot;The Linux philosophy is `Laugh in the face of danger`. Oops. Wrong One. `Do it yourself`. Yes, that`s it. Linus Torvalds&quot;, &quot;All the best people in life seem to like LINUX. Steve Wozniak&quot;, &quot;If Microsoft ever does applications for Linux it means I`ve won. Linus Torvalds&quot;, &quot;I currently use Ubuntu Linux, on a standalone laptop - it has no Internet connection. I occasionally carry flash memory drives between this machine and the Macs that I use for network surfing and graphics; but I trust my family jewels only to Linux. Donald Knuth&quot;, &quot;Android is very different from the GNU/Linux operating system because it contains very little of GNU. Indeed, just about the only component in common between Android and GNU/Linux is Linux, the kernel. Richard Stallman&quot; ]"></span> 
 
    </h1> 
 
</div>

）= stackoverflowのは、この問題の詳細を追加するために私に尋ねるので、このテキストはただ生きるためにこの質問を移動します

PS：問題はChromeブラウザでのみ発生します。 バージョン63.0.3239.84（公式ビルド）（64ビット）

Answer 1

拡張機能を無効にしてください。奇妙な動作が発生することがあります。