转换与过渡抽搐在Chrome

Question

我有下一个代码:JSFiddle

<div class="wrap">
    <div class="item">
        <div class="image" style="background-image: url(http://loremflickr.com/800/800)"></div>
    </div>
</div>
<style>
.wrap {
    width: 500px;
}
.item {
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
}
.image {
    backround-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all .4s ease;
}
.item:hover .image {
    transform: scale(1.1)
}
</style>

如果你将鼠标放在照片上，然后离开，然后放置，然后再次离开不是很快(等待过渡完成)，有时图像是抽搐的。看起来转换有时不工作。

有谁知道这是什么问题吗?

Answer 1

你的代码中有一个语法错误:

backround-size: cover;
----^

这会导致定位抖动