:在bug之后(仅限chrome)

Question

我正在为一个学校项目构建一个网站，我尝试了一个奇怪的bug。

我在菜单项上使用：after和transform/transfers。它适用于所有浏览器，但右侧div中的标签上有一个仅使用chrome的动画。

你可以在这里看到：http://mbrillaud.fr/gamejutsu/悬停在菜单上时，右侧div的标签（action、adventure等）为"clipping"。

菜单的css：

.left a::after{
    content: '';
    display: block;
    height: 2px;
    background-color: #282C34;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition: transform 0.1s;
}
.left a:hover::after{
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

有人经历过或有想法吗？提前感谢您的帮助！

Answer 1

它实际上不是在悬停时剪裁的，它总是被剪裁的，这是背面可见性显示。当你用css过渡悬停时，chrome会闪烁背面的可见性。你可以通过应用这个来防止闪烁：

*, *:before, *:after {
    -webkit-backface-visibility: hidden;
}

但这不会阻止你的标签被剪切。将你在游戏标签标签上的线高度更改为1.6em，这将防止剪切，你将不需要应用背面可见性破解。

Answer 2

您可以使用背景（渐变或img）和背景大小。

a {
  text-decoration:none;
  color:black;
  background:linear-gradient(to top, black , black) no-repeat bottom center;
  background-size:0 2px;
  transition:0.1s;
}
a:hover {
  background-size:100% 2px;
}

<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>