CSS3 hover transform 图片会抖动怎么解决？
当鼠标放到图片上面的时候，图片会先抖动一下，然后再放大，有缓存之后就正常了，当ctrl+f5强制刷新后又出现这种情况，经过测试，去掉.innerimg{width:500...
当鼠标放到图片上面的时候，图片会先抖动一下，然后再放大，有缓存之后就正常了，当ctrl+f5强制刷新后又出现这种情况，经过测试，去掉.inner img { width: 500px;}就正常，但是我需要缩放图片，请问要怎么解决？谢谢。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outter {
height: 375px;
margin: 10px auto;
width: 500px;
}
.outter:hover .inner {
transform: scale(1.1);
}
.inner {
height: 375px;
transition: transform 0.4s ease-in-out 0s;
width: 500px;
}
.inner img {
width: 500px;
}
</style>
</head>
<body>
<div class="outter">
<div class="inner"><a href=""><img src="http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg" /></a></div>
</div>
</body>
</html>
火狐下测试有此问题，谷歌测试正常。。求助百度知道的大神们。。困扰我好久了。。帮忙解决的再加悬赏 展开
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outter {
height: 375px;
margin: 10px auto;
width: 500px;
}
.outter:hover .inner {
transform: scale(1.1);
}
.inner {
height: 375px;
transition: transform 0.4s ease-in-out 0s;
width: 500px;
}
.inner img {
width: 500px;
}
</style>
</head>
<body>
<div class="outter">
<div class="inner"><a href=""><img src="http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg" /></a></div>
</div>
</body>
</html>
火狐下测试有此问题，谷歌测试正常。。求助百度知道的大神们。。困扰我好久了。。帮忙解决的再加悬赏 展开
1个回答
2016-04-23 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
经测试，采用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刷新，均不会有闪动情况
分析：
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刷新，均不会有闪动情况
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
