开发者

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

开发者 https://www.devze.com 2023-01-28 04:43 出处:网络
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

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;
}
开发者_如何学Python

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!


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.


I don't see it on 7.0.517.44 Mac, however, you may try stating the visited color explicitly:

a:visited {
   color: #0077cc;
}

Your transition declarations look good to me.

0

精彩评论

暂无评论...
验证码 换一张
取 消