To break it up: after inserting an animated element inside a TD, all of the following table borders disappear starting from the next TD (or become white because their offset is preserved). If I just turn off the animation, it works fine:
animation disabled
animation enabled
The error 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 if it plays in other environments. If you want, you can go to the site and check it, on its main page there are many similar tables: http://windbet.com
Details:
0) the website uses Angular 1.3
1) the vertical border is on TR and the horizontal border is on TD
2) there are no elements between TR, all lines are drawn ng-repeat
3) animated element :: before on a DIV inside TD
4) the borders disappear not only on the table with the animated div, but also on all the following tables inside the area (also drawn using ng-repeat, the outer loop)
5) the animation is pretty simple
@keyframes rota { from { transform: rotate(0); } to { transform: rotate(360deg); } }
6) border-collapse: a separate one on the table partially fixes it - the border appears again, but it does not look like the same border, but the second one, so it creates another offset of 1 px
Any ideas how I can highlight a bug to report this? Has anyone seen something like this before?
source share