Question

如上所述，仅在safari中，我的CSS下划线动画会导致导航栏的其余部分悬停在闪烁的右侧。将-webkit-transform:translate3d(0,0,0);放在标题部分可以解决闪烁问题，但会使文字变得模糊不清。模糊的任何解决方案？以下是应该能够重新构建问题的CSS和HTML文本

header {
  background-color: #f5f5f5;
  webkit-transform: translate3d(0, 0, 0);
  text-align: center;
  padding: 20px 0 0 0;
}

.wrapper {
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background-color: #EBE8E8;
}

nav a {
  color: white;
  font-family: 'arimo', sans-serif;
  text-decoration: none;
  position: relative;
}

nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

nav a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

nav {
  margin: 30px 0 0 0;
  padding: 20px 0 20px 0;
  background-color: #1764b0;
}

nav a {
  padding: 25px 30px 5px;
  text-decoration: none;
}

<html>

<head>
  <link href="/test/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <nav><a href="#">HOME</a><a href="#rworld">R-WORLD</a><a href="#lineup">LINEUP</a><a href="#contact">CONTACT</a>
    </nav>
  </header>
</body>

</html>

Answer 1

您的<body>标记位于<head>标记上方，所以我想这就是您的问题。同样在将来，您最好在codepen内为此类事情工作。我已经将你的代码添加到匿名笔中了：

https://codepen.io/anon/pen/NyMOwd

Answer 2

试试这个： https://codepen.io/anon/pen/wyjQqm

nav > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}
nav > a:hover:before,
nav > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}

Answer 3

从标题中删除翻译道具并添加以下道具以导航a :: before

backface-visibility：hidden;

font-smoothing：antialiased;

希望这有帮助。

CSS下划线动画会导致Safari中的闪烁，找到解决方案但会导致文本模糊

3 个答案: