Элемент, находящийся в процессе перехода внутри td, делает мерцание стола

Комбинация td{position: relative}, содержащая элемент (<i>) с transition, делает мерцание таблицы (границы и фон) в браузере Chrome (версия 54.0.2840.71 м, Windows 10) при переключении 1,2,3 в фрагменте ниже (границы, фон).

Является ли это желаемым поведением, ошибкой или может быть разрешено с помощью css?

(Мне нужно положение, чтобы быть там, поскольку другой код также полагается на него)

var app = angular.module('app', []);
app.controller('testCtrl', function($scope) {
  $scope.bodys = [1, 2, 3];
});

table,
tr,
td {
  position: relative;
}
td{
border-top: 1px solid darkgreen !important;
}
table {
  table-layout: fixed;
}
.glyphicon-chevron-right {
  transition: transform .3s;
  cursor: pointer;
}
.toggled {
  transform: rotate(90deg);
}
.odd {
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet" />

<body ng-app="app">
  <table ng-controller="testCtrl" class="table">
    <tbody ng-repeat="b in bodys">
      <tr ng-class-even="'odd'">
        <td>{{b}}</td>
        <td>
          <a href="" ng-click="toggled = !toggled">toggle <i class="glyphicon glyphicon-chevron-right" ng-class="{'toggled': toggled}"></i></a>
        </td>
        <td></td>
      </tr>
      <tr ng-if="toggled" ng-class-even="'odd'">
        <td>{{b + 100}}</td>
        <td></td>
        <td></td>
      </tr>
      <tr ng-if="toggled" ng-class-even="'odd'">
        <td>{{b + 200}}</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

Ответ 1

.odd td {
  background: gray;
}

Должен это исправить. Установите переход на 10 секунд. И затем вы можете увидеть, что tr повторно отображается, а цвет не применяется ко всем столбцам.

Ответ 2

Я думаю, это из-за анимации transform. Сделать элемент rotate вычисляется разными способами браузером, а здесь с Chrome, он как элемент не находится в table, пока он анимирован...

не работает с каким-либо другим свойством преобразования.

var app = angular.module('app', []);
app.controller('testCtrl', function($scope) {
  $scope.bodys = [1, 2, 3];
});

table,
tr,
td {
  position: relative;
}
td{
border-top: 1px solid darkgreen !important;
}
table {
  table-layout: fixed;
}
#toggle {
  position: absolute;
  transition: transform .3s;
  cursor: pointer;
}
/*.toggled {
  transform: rotate(90deg);
}*/

.odd {
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body ng-app="app">
  <table ng-controller="testCtrl" class="table">
    <tbody ng-repeat="b in bodys">
      <tr ng-class-even="'odd'">
        <td>{{b}}</td>
        <td>
          <a href="" id="toggle" ng-click="toggled = !toggled" ng-class="{'toggled': toggled}">toggle</a>
        </td>
        <td></td>
      </tr>
      <tr ng-if="toggled" ng-class-even="'odd'">
        <td>{{b + 100}}</td>
        <td></td>
        <td></td>
      </tr>
      <tr ng-if="toggled" ng-class-even="'odd'">
        <td>{{b + 200}}</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

Ответ 3

выглядит как ошибка рендеринга хрома, во всяком случае, ~~принудительное 3D-ускорение решает проблему (или, по крайней мере, на моем хроме)~~.

Это смешно, в редакторе фрагмента кода он работает, но не работает нигде.