zod zod - 1 month ago 7
CSS Question

Chrome bug with animating ellipsis text that changes colour. the text moves to the right

This is an example of a problem I am having. Clicking on the middle anchor causes it to move to the right.



var anchors = document.getElementsByTagName('a');

var onSelect = function () {
var i, a;
for (i = 0; i < anchors.length; i += 1) {
a = anchors[i];
if (a === this)
continue;
a.classList.remove('selected');
}
this.classList.toggle('selected');
};

(function () {
for (var i = 0; i < anchors.length; i += 1) {
anchors[i].addEventListener('click', onSelect);
}
}());

.table {
display: table;
background-color: indigo;
width: 600px;
}

.row {
display: table-row;
background-color: seagreen;
}

.cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}

a {
padding: 10px;
background-color: lightblue;
display: inline-block;
transition: 0.5s ease;
width: 140px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
color: black;
}

a.selected {
background-color: blue;
color: white;
}

<div class="table">
<div class="row">
<div class="cell">
<a href="#">A New Hope</a>
</div>
<div class="cell">
<a href="#">The Empire Strikes Back</a>
</div>
<div class="cell">
<a href="#">Return of the Jedi</a>
</div>
</div>
</div>





If I don't change the colour of the text, or remove the ellipsis, it doesn't happen. I can only reproduce it in chrome, so I assume it is an issue with that browser.

Wondered if there was a known work around. My chrome version is 53.0.2785.143 m

Same example in a jsfiddle:
https://jsfiddle.net/f5k8p3tv/

Answer

Set your display:inline-block to display:block on the anchor element.

Somehow it tries to re-assess it's "inline" position and causes it to shift. Since you are working with a table, you do not need the inline feature because each element has a fixed position within the table row.

var anchors = document.getElementsByTagName('a');

var onSelect = function () {
  var i, a;
  for (i = 0; i < anchors.length; i += 1) {
    a = anchors[i];
    if (a === this)
    	continue;
    a.classList.remove('selected');
  }
	this.classList.toggle('selected');
};

(function () {
  for (var i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener('click', onSelect);
  }
}());
.table {
  display: table;
  background-color: indigo;
  width: 600px;
}

.row {
  display: table-row;
  background-color: seagreen;
}

.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

a {
  padding: 10px;
  background-color: lightblue;
  display: block;
  transition: 0.5s ease;
  width: 140px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: black;
}

a.selected {
  background-color: blue;
  color: white;
}
<div class="table">
	<div class="row">
    <div class="cell">
      <a href="#">A New Hope</a>
    </div>
    <div class="cell">
      <a href="#">The Empire Strikes Back</a>
    </div>
    <div class="cell">
      <a href="#">Return of the Jedi</a>
    </div>
  </div>
</div>

Comments