Question

我创建了一个视频游戏网站。在测试时，我注意到当我悬停在按钮上时浏览器之间存在一些不一致。 Firefox Quantum似乎能够同时为FontAwesome GitHub图标和文本着色，而Chrome则无法使用。两种浏览器都在最新版本上运行。我的问题是，是什么造成了这种情况，我该怎么做才能防止这种情况发生？

＆＃13;

* {
  font-family: sans-serif;
  transition: all 0.7s !important;
}

.button {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 40px;
  border: solid 2px;
  text-align: center;
  font-size: 18px;
  border-color: antiquewhite;
  padding: 8px;
  width: auto;
  cursor: pointer;
  margin: 5px;
  outline: none;
  box-shadow: 0 0 10px 0 #D3D3D3;
  color: white;
}

.button:hover {
  box-shadow: 0 0 16px 0 #051428;
  background-color: #faebd7;
  color: #051428;
}

.bg-gradient {
  background: linear-gradient(225deg, #4467ae, #449fae, #44ae8e, #9eae44, #ae7844, #ae4444, #ae4497, #7544ae);
  background-size: 1600% 1600%;
  -webkit-animation: gradient 40s ease infinite;
  -moz-animation: gradient 40s ease infinite;
  -o-animation: gradient 40s ease infinite;
  animation: gradient 40s ease infinite;
}

.fg-white {
  color: #ffffff;
}

.center-text {
  text-align: center;
}

.fade-in {
  animation: fade 1.2s
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-o-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body class="bg-gradient fg-white center-text">
  <div class="fade-in">
    <h1>Website</h1>
    <p>
      Hover over the button and you will see the issue.
    </p>
    <button class="button" onclick="redirectToSite('https://github.com/Frontear/gameSite')"><i class="fa fa-github" aria-hidden="true"></i>&nbsp;GitHub</button>
  </div>
</body>

＆＃13;

Answer 1

好吧，似乎当你确实设置了转换到css开头的所有元素时，就会导致这种行为。我只是将你的css的开头改为：

CSS：

* {
  font-family: sans-serif;
}

.button {
  border-radius: 40px;
  border: solid 2px;
  text-align: center;
  font-size: 18px;
  border-color: antiquewhite;
  padding: 8px;
  width: auto;
  cursor: pointer;
  margin: 5px;
  outline: none;
  box-shadow: 0 0 10px 0 #D3D3D3;
  color: white;
  transition: all 0.7s;
}

显然，事件传播到图标时延迟为0.7秒，因为转换已应用于按钮和图标。

更新的小提琴： https://jsfiddle.net/pffrmLpm/6/

浏览器

1 个答案: