一个transform动画的坑

最近新版本组件更新现场更的头都大了，全是坑。有些组件改动大，jsp写的不规范的全是问题。遇到了一个有点意思的问题，暂时还没找到原因。

问题大概是这样，在表格thead中，th有左右边框，然后59/60的chrome浏览器可以重现，70的不行，表格滚动条拖动的时候，边框没有跟着表格走，jsp初步判定是因为表格前面的按钮上加了一个进度动画，transform且infinite，不用transform或者不用infinite都可以规避问题。

周末加班总结了一下问题所在，因为页面上是表格组件，是多个表格拼起来的一个表格，简化了一下之后，写了一个最简的可以重现问题的demo

css部分

html部分

js设置一个定时器，改变table的margin-left值

会出现这样的情况：

解决方法有以下几种：

1. 做动画的span标签加上z-index属性
2. 给表格table元素加position:relative属性
3. 给表格加transform: scale(1) / translateX(0) 等

做了功课没有找到具体的原因，但是有个类似的链接可以参考一哈~
链接: https://div.io/topic/1348