css - 在 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>

如果你将鼠标放在照片上，然后离开，然后放下，然后再次离开，速度不是很快(等待过渡完成)，有时图像会抽动。看起来 transition 有时不起作用。

有谁知道，这是什么问题？

Answer 1

您的代码中有语法错误:

backround-size: cover;
----^

这会导致定位抽搐