How to avoid this purple flash on Chrome when using transitions?

The problem here is http://rohitarondekar.com/articles (and on every page of the site). When you load a page in Chrome, the links go from purple to the intended color. If you do not see the problem, try a hard update. I don't know if this is a bug or a problem with my CSS. I included a small fragment of the corresponding CSS as follows:

/*
* Reset
*/

* {
  margin: 0;
  padding: 0;
}

a {
  color:  #999;
  text-decoration: none;

  -webkit-transition-duration: 500ms;
  -webkit-transition-property: background, color;
  -webkit-transition-timing-function: ease; 

  -moz-transition-duration: 500ms;
  -moz-transition-property: background, color;
  -moz-transition-timing-function: ease;

  -o-transition-duration: 500ms;
  -o-transition-property: background, color;
  -o-transition-timing-function: ease;

  transition-duration: 500ms;
  transition-property: background, color;
  transition-timing-function: ease;
}

a:hover {
  color: #0077cc;
  padding-bottom: 2px;
  border-bottom: solid 1px #ccc;
}

h1 a {
  font-family: Georgia, "Nimbus Roman No9 L", Serif;  
  color: #6A6A6A;
} 

h1 a:hover {
  color: #0077cc;
  border-bottom: 0;
}

nav ul li a#active {
  color: #555;
}

nav ul li a#active:hover {
  color: #0077cc;
}

section#content a {
  color: #0077cc;
}

section#content a:hover {
  color: #6A6A6A;
  background-color: #f0f0f0;
  border-bottom: 0;
}

footer a {
  color: #EEE;
}

footer a:hover {
  color: #222;
  background-color: #EEE;
  border-bottom: 0;
}

I believe that the problem is due to the fact that I have already visited links, the transition of links from purple to a certain color due to the css3 transition property.

Chrome, , - 7.0.517.44 64- Ubuntu. , . , , . !

+3
2

Chrome, , FOUC. , - , . 15 , .

+2

7.0.517.44 Mac, :

a:visited {
   color: #0077cc;
}

.

0

Source: https://habr.com/ru/post/1778097/


All Articles