一个transform动画的坑

原创 缪缪 随笔 JS笔记 61阅读 26 天前 举报

最近新版本组件更新现场更的头都大了,全是坑。有些组件改动大,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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复