CSS3 hover transform 图片会抖动怎么解决?

html-css015

CSS3 hover transform 图片会抖动怎么解决?,第1张

经测试,采用Firefox 45.0.1存在闪烁问题,并发现以下浏览器的某个版本:微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况,包括载入闪动,悬停后闪动。分析:Blink对transition中,属性transform的动画渲染存在差异,而Chrome中的最新版本,已经不存在此情况。解决方法:<style>.outter { height: 375px margin: 10px auto width: 500px }.inner{}img:hover { width:110% margin-left:-5% margin-top:-5%}img{width:100% transition:0.4s ease-in-out}</style>复制代码以上CSS,在IE10、IE11、Chrome及Firefox 45.0.1中调试通过:首次载入,及Ctrl+F5刷新,均不会有闪动情况

这个是一些特性吧,有可能是视频播放的时候的层叠问题。。

自己是使用onmouseover配合onmouseout解决的,可以不修改css的样式修改选择器就足够了,例如鼠标浮动是更改class+=active,那么CSS就是;

sth.active {

    //原来hover的样式

}

然后Javascript就是;

var a= document.querySelector('css选择器,使用#id,不然会是一个数组..')

a.addEventListener('mouseover',function(){this.classList.add('active')})

a.addEventListener('mouseout',function(){this.classList.remove('active')})

主要还是冒泡的问题