Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

The problem is here http://rohitarondekar.com/articles (and on every page of the site). When you load the page in Chrome, the links go from purple to the intended color. If you don't see the problem then try a hard refresh. I don't know if this is a bug or a problem with my CSS. I've included a small snippet of the relevant 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 the problem is the since I've visited the links already, the links transition from the purple to the specific color because of the css3 transition property.

The version of Chrome I'm on is 7.0.517.44 on Ubuntu 64-bit. Any help as to how this can be avoided will be greatly appreciated. Also if you need any other info do ask. Thanks!

like image 200
rohit.arondekar Avatar asked Dec 02 '10 12:12

rohit.arondekar


1 Answers

I had this problem in Chrome and thought it had something to do with visited links or just FOUC. It turned out that I had my web cache settings turned off because I was developing. I turned cache settings back to 15 minutes and the temporarily purple nav link on load disappeared.

like image 81
Eric McClelland Avatar answered Nov 07 '22 05:11

Eric McClelland