CODEWITHSUNDEEP
htmlcssangularjsgoogle-chrome
Alexander Uskov
Alexander Uskov

Reputation: 86

Animation inside a TD breaks table border : weird chrome bug?

To break it down: after inserting animated element inside a TD all of the following table borders dissapear starting from the next TD (or become white, as their offset is preserved). If I just disable animation, it works fine:
animation disabled
animation enabled

The bug exists only in Chrome (latest version). Firefox, IE and Safari work fine.

The code is too heavy to include here and I'm not sure it's reproducible in other environments.

The details:
0) the website is using Angular 1.3

  1. the vertical border is on TR while the horizontal is on TD

  2. there're no elements inbetween TR, all the rows are drawn by ng-repeat

  3. animated element is ::before on a DIV inside a TD

  4. borders disappear not only on the table with animated div but also on all of following tables inside the scope (also drawn with ng-repeat, outer loop)

  5. the animation is quite simple

    @keyframes rota { from { transform: rotate(0); } to { transform: rotate(360deg); } }

  6. border-collapse:separate on table partly fixes it - the border appears again but it's like not the same border but the second one, so it creates another 1 px offset

Any ideas how I can isolate the bug to report it? Anyone seen something like this before?

Upvotes: 6

Views: 328

Answers (1)

Alexander Uskov
Alexander Uskov

Reputation: 86

Fixed in chrome 55.0.2883.87 or even some of preceding versions

Upvotes: 0

Related Questions