CODEWITHSUNDEEP
javascripthtmlcssbrowser
Frontear
Frontear

Reputation: 1261

Button css inconsistencies between browsers

I have created a website for video games. While testing, I noticed there was some inconsistencies between browsers when I hovered over a button. Firefox Quantum seems to be able to color both the FontAwesome GitHub icon, and the text at the same time, while Chrome cant. Both browsers are being run on the latest versions. My question is, what is causing this, and what can I do to prevent this?

* {
  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%;
  }
}
<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>

Upvotes: 0

Views: 71

Answers (1)

Bruno C.
Bruno C.

Reputation: 26

Ok, it seems that when you did set the transition to all elements in the beginning of your css you caused this behavior. I've just change the beginning of your css to:

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;
}

Apparently, the event was propagating to the icon with a 0.7s delay, because the transition was applied to both the button and the icon.

The updated fiddle: https://jsfiddle.net/pffrmLpm/6/

Upvotes: 1

Related Questions