Element in transition inside td relative makes table flicker
.odd td { background: gray;}Should fix it.Set the transition to 10s. And then you can see that tr is re-rendered and the color is not applied to all columns.
I think it's due to the transform animation. Make an element rotate is calculated with many different ways by browser and here with Chrome, it's like the element isn't in table while he's animated...
doesn't work with any other transform property.
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>
looks like chrome rendering bug, anyway, forcing 3d acceleration solve the problem (or at least in my chrome).
thats funny, in the code snippet editor, it works, but not working anywhere else.