Html Mozilla Firefox中CSS变换比例的突然移动
我正在使用图像上的“变换比例”(transform scale)在悬停时进行缩放。但是,当缩放动画完成时,图像会有一点抖动。这只发生在Firefox中(我使用的是最新版本39.0,但这个问题在早期版本中也存在)。我在Chrome中看不到这个问题 是JSFIDLE。 代码如下: HTMLHtml Mozilla Firefox中CSS变换比例的突然移动,html,css,firefox,Html,Css,Firefox,我正在使用图像上的“变换比例”(transform scale)在悬停时进行缩放。但是,当缩放动画完成时,图像会有一点抖动。这只发生在Firefox中(我使用的是最新版本39.0,但这个问题在早期版本中也存在)。我在Chrome中看不到这个问题 是JSFIDLE。 代码如下: HTML 谢谢。看起来这只会发生在一些天平上1.09执行,但代码>1.1不执行。可能与取整有关。 <div class="item-box"> <div class="ca
谢谢。看起来这只会发生在一些天平上<代码>1.09执行,但代码>1.1不执行。可能与取整有关。
<div class="item-box">
<div class="category-item">
<div class="picture">
<a title="Show products in category Hats" href="/digital-downloads">
<img title="Show products in category Hats" src="http://s6.postimg.org/gyzzlqts1/hats1_350.jpg" alt="Picture for category Hats">
<div class="inset-shadow"></div>
</a>
</div>
<h2 class="title">
<a title="Show products in category Hats" href="/digital-downloads">
Hats
</a>
</h2>
</div>
</div>
.item-box:nth-child(2n+1) {
clear: none;
}
*, *::before, *::after {
box-sizing: border-box;
}
.item-box {
width: 313px;
height: 313px
}
.item-box {
margin: 0 0 80px;
}
.item-box {
float: left;
margin: 0 0 40px;
padding: 0 5px;
position: relative;
text-align: left;
}
.item-box .picture {
background-color: rgb(255, 255, 255);
margin: 0 0 20px;
overflow: hidden;
z-index: 1;
margin:0;
}
.item-box .picture a {
display: block;
position: relative;
background-color: rgb(255, 255, 255);
transition: all 0.4s linear 0s;
z-index: 10;
}
.item-box .picture a img {
margin: auto;
max-height: 100%;
max-width: 100%;
transition: all 0.6s linear 0s;
}
.item-box:hover .picture a img {
transform: scale(1.09);
}
a img {
opacity: 0.99;
}
a img {
border: medium none;
}
.inset-shadow {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.4s ease 0s;
}
.inset-shadow:hover {
box-shadow: 0 0 0 30px rgba(97, 91, 89, 0.35) inset;
}