Menu
Combination of td{position: relative}, containing element (<i>) with transition makes table flicker (borders and background) in Chrome(Version 54.0.2840.71 m, windows 10) browser when toggling 1,2,3 in snippet below (borders, background).
Is this desired behaviour, bug, or can it be solved with some css?
(I need position to be there since other code is also relying on it)
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="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="" 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>
810
.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.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
