CODEWITHSUNDEEP
htmlcssangularjsgoogle-chrometwitter-bootstrap-3
terafor
terafor

Reputation: 1626

Element in transition inside td relative makes table flicker

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>

Upvotes: 11

Views: 919

Answers (3)

am05mhz
am05mhz

Reputation: 2875

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.

Upvotes: 1

Alexis
Alexis

Reputation: 5831

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>

Upvotes: 1

xszaboj
xszaboj

Reputation: 1085

.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.

Upvotes: 3

Related Questions