TD 内的动画打破了表格边框：奇怪的 chrome 错误？

Posted 2023-03-05

【中文标题】TD 内的动画打破了表格边框：奇怪的 chrome 错误？

【英文标题】：Animation inside a TD breaks table border : weird chrome bug?

【发布时间】：2017-03-14 19:24:01

【问题描述】：

分解：在 TD 中插入动画元素后，下表所有边框从下一个 TD 开始消失（或变为白色，因为它们的偏移量被保留）。如果我只是禁用动画，它可以正常工作：animation disabledanimation enabled

该错误仅存在于 Chrome（最新版本）中。 Firefox、IE 和 Safari 运行良好。

代码太重，无法在此处包含，我不确定它在其他环境中是否可重现。如果你希望你可以去网站看看，它的主页上有很多类似的表格：http://windbet.com

详细： 0) 网站使用 Angular 1.3 1) 垂直边框在 TR 上，而水平边框在 TD 上 2）TR之间没有元素，所有的行都是由ng-repeat绘制的 3) 动画元素是 ::before 在 TD 内的 DIV 4) 边框不仅在带有动画 div 的表格上消失，而且在范围内的所有以下表格上（也使用 ng-repeat，外循环绘制） 5) 动画很简单

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

6)border-collapse:separate on table 部分修复了它 - 边框再次出现，但它就像不是同一个边框而是第二个边框，所以它创建了另一个 1 px 偏移

任何想法我可以如何隔离错误以报告它？有人见过这样的东西吗？

【问题讨论】：

截图上有，恐怕会被认为是广告。

【参考方案1】：

在 chrome 55.0.2883.87 甚至之前的一些版本中修复

【讨论】：

这在评论部分不是答案

欢迎来到 Stack Overflow！这应该是评论，而不是答案。只要你earn足够reputation，你就可以leave a comment。