Ellipsis plus width animation produces trembling

Question

During a recent implementation of a new label component, I got an issue which I never have seen before.

This label component has to display the first letter on repose. If the label is being hovered, the width will be increased being animated in order to display the full text. If the final full text is too long, an ellipsis should cut it.

The issue is when the label is being hovered the ellipsis calculation + width animation + innerText change produces a terrible trembling.

Here the example code, just hover the label component.

NOTE: In this example I am using custom elements feature, make sure you are using a compatible browser.

class LabelComponent extends HTMLElement {
  short = 'A';
  long = 'A very long item name';
  _eventSet = new Set();
  constructor() {
    super();
    this.innerText = this.short;
    this._eventSet.add({
      trigger: 'mouseenter',
      callback: () => {
        this.innerText = this.long;
      }
    });
    this._eventSet.add({
      trigger: 'mouseleave',
      callback: () => {
        this.innerText = this.short;
      }
    });
  }

  _registerEvents() {
    this._unRegisterEvents();
    for (let eventItem of this._eventSet) {
      this.addEventListener(eventItem.trigger, eventItem.callback);
    }
  }

  _unRegisterEvents() {
    for (let eventItem of this._eventSet) {
      this.removeEventListener(eventItem.trigger, eventItem.callback);
    }
  }

  connectedCallback() {
    this._registerEvents();
  }

  disconnectedCallback() {
    this._unRegisterEvents();
  }
}


customElements.define('label-component', LabelComponent);

label-component {
  display: block;
  width: 20px;
  height: 20px;
  background: orange;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.35s ease;
  border-radius: 3px;
}

label-component:hover {
  width: 120px;
}

<label-component></label-component>

Do any ideas for fixing this issue?

Answer 1

After 5 years, I found out this issue has been resolved in Chrome, probably in other browsers as well.