Search code examples
javascriptcsstext-rotation

Phantom border on js text rotator Chrome Browser


For some reason my text rotator show ghost-phantom border lines on top and sometimes on left side. This problem comes only on Chrome Browser, If you check it on Firefox and Safari, all looks great.

how to fix this phantom border which comes only on Chrome Browser?

Codepen example here

Text rotator error

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>

The stackoverflow ask me to add more details about this issue, so this text just to move this question to live =)

PS: problem comes only on Chrome browser! Version 63.0.3239.84 (Official Build) (64-bit)


Solution

  • Try to disable the extensions, sometimes they cause strange behaviors.