css - 在 Chrome 中悬停时，使用 CSS 动画会导致页面上的其他随机链接跳转

Question

我有一个简单的 GIF 图像，我正在对其应用关键帧动画(使其无限旋转)，出于某种原因，如果我将鼠标悬停在页面其他地方的链接上，它们会随机向上或向下跳一个像素或二。

当我删除上面有动画的 DOM 元素(图像)时，不会发生跳跃，这让我相信它是由 CSS 动画以某种方式引起的。这只发生在 Chrome 中，即使是最新的 Chrome 更新也是如此。

我已经阅读了此处所有其他相关问题，但尚未解决任何问题，这不是此处需要的 -webkit-backface-visibility 修复。

示例 CSS:

@mixin spin {
    -webkit-animation: spin360 1.26s infinite linear;
    animation: spin360 1.26s infinite linear;
}
@-webkit-keyframes spin360 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin360 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.animated-image {
    position: absolute;
    @include spin;
}

示例 DOM:

<h3 class="header">
    <a href="#" class="link">Heading title</a>          
</h3>

<div class="animated-image"><img src="../img/loader.gif"></div>

工作示例:http://codepen.io/caseytrombley/pen/YWYqRQ

Answer 1

我认为问题出在 chrome img 上，它不是垂直和水平居中的。

我建议你用flexbox来居中，一定要固定

其他方法是使用 img 之类的背景图片并放置

background-position: center center;
background-size: contain;

但我可以想象它是一个动画 gif，在那种情况下必须用 flex 修复