chrome中的大纲/边框渲染问题

Question

我在Chrome中设置边框/轮廓颜色变化动画时发现了一种奇怪的行为。我的元素的右边框/轮廓没有正确地从白色到红色动画，并且在鼠标离开元素后保持红色。滚动页面会强制边框/轮廓正确显示。

标准状态：

破碎的悬停状态：

小鼠离开后：

右边是灰色的细边框（有时候是鼠标离开后）：

期望的结果（适用于IE，Firefox，Opera）：

我的CSS（LESS）元素：

a {
    display: inline-block;

    padding: 1em 3em;

    outline-width: 1px;
    outline-style: solid;
    outline-color: white;
    color: @hue-red;
    background: white;

    text-decoration: none !important;
    text-align: center;

    transition: color 200ms, outline 200ms;

    .gfx(arrow-circled-right);

    &:before {
        font-size: 1.8em;
        margin-right: 0.5em;
    }

    &:hover, &:focus {
        color: darken(@hue-red, 5%);
        outline-color: darken(@hue-red, 5%);
    }
}

我尝试从边框切换到轮廓并返回完全相同的结果。

编辑：我无法重现错误，所以我正在结束这个问题。