js 文本旋转器上的幻影边框 Chrome 浏览器

Question

出于某种原因，我的文本旋转器在顶部显示幻影边框线，有时在左侧。这个问题只出现在 Chrome 浏览器上，如果你在 Firefox 和 Safari 上检查它，一切看起来都很好。

如何修复仅在 Chrome 浏览器上出现的幻象边框？

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>

Whosebug 要求我添加有关此问题的更多详细信息，因此本文只是为了将此问题移至 live =)

PS：问题只出现在 Chrome 浏览器上！版本 63.0.3239.84（正式版）（64 位）

Answer 1

尝试禁用扩展，有时它们会导致奇怪的行为。

js 文本旋转器上的幻影边框 Chrome 浏览器

Phantom border on js text rotator Chrome Browser

javascript

css

text-rotation