Question

我在Wordpress网站上遇到了一个小问题，我不得不制作一个动画以使按钮从左到右移动。因此，我使用“线性梯度”，问题是，仅在Chrome上，有时（并非所有按钮（?????）上）在按钮的右侧或左侧有一小行颜色（有时是仅当您将鼠标悬停时才能看到它）

以下是其中一个按钮的代码，例如在网站上会发生错误：

a {
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    color: #FFF;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 35px;
        -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #515050), color-stop(50%, #ddc39f));
    background: -webkit-linear-gradient(left, #515050 50%, #ddc39f 50%);
    background: -o-linear-gradient(left, #515050 50%, #ddc39f 50%);
    background: linear-gradient(to right, #515050 50%, #ddc39f 50%);
    background-size: 200% 100%;
    background-position: left bottom;
}

a:hover {
    background-position: -100% 0;
}

<a href="#">En savoir plus</a>

在这里，您可以看到它不是由于某些原因而出错，而是在网站中（当我将其悬停时）：

Chrome button bug

所以，我试图用伪元素来制作动画，就像这样：

a {
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    background-color: #ddc39f;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
    padding: 8px 20px 8px 11px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
}

a:after {
    content: '';
    position: absolute;
    background: #515050;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    transition: all 0.3s ease 0s;
    z-index: -1;
}

a:hover {
    background: transparent;
}

a:hover:after {
  right: 0;
}

<a href="#">En savoir plus</a>

但是此动画的问题在于背景必须通过透明，否则动画（伪元素）将无法显示。

所以我问你是否有可能调试第一个解决方案，仅在chrome上出错的解决方案，还是有办法重现与第一个带有伪元素的效果完全相同的效果？知道我无法在中添加文本，因为我使用的是WordPress，这会使所有事情变得复杂很多。

感谢您的帮助

Answer 1

对于一天有同样问题的人。显然问题出在显示器上，请尝试放置：

display: inline-table;

它应该可以解决问题。

Chrome在按钮动画上的错误

1 个答案: