CODEWITHSUNDEEP
google-chromecsscss-transitions
Aaron
Aaron

Reputation: 10848

Strange CSS3 transition...bug?

If you visit http://www.framingham.edu/ in the latest stable version of Chrome, you'll notice that the CSS3 transition for the "Spring Commencement" link does not work. It also doesn't work for the "More Events" text (but it does work for the blue background behind it). If you try the same thing in Safari, Firefox, or Opera, it works fine. I don't really understand why this is happening. Could it be my CSS3 that's causing it to break specifically for Chrome?

CSS:

#events span a {
    color: #B00932;
    text-decoration: none;
    -webkit-transition: color 0.6s ease-in;
    -moz-transition: color 0.6s ease-in;
    -o-transition: color 0.6s ease-in;
    -ms-transition: color 0.6s ease-in;
    transition: color 0.6s ease-in;
}
#events span a:hover {
    color: #ecb220;
    text-decoration: none;
}
.moreEvents {
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    background-color: #00345c;
    -webkit-transition: background-color 0.6s ease-in, color 0.6s ease-in;
    -moz-transition: background-color 0.6s ease-in, color 0.6s ease-in;
    -o-transition: background-color 0.6s ease-in, color 0.6s ease-in;
    -ms-transition: background-color 0.6s ease-in, color 0.6s ease-in;
    transition: background-color 0.6s ease-in, color 0.6s ease-in;
}
.moreEvents:hover {
    background-color: #eeb220;
}
.moreEvents a {
    color: #fff;
    -webkit-transition: color 0.6s ease-in;
    -moz-transition: color 0.6s ease-in;
    -o-transition: color 0.6s ease-in;
    -ms-transition: color 0.6s ease-in;
    transition: color 0.6s ease-in;
}
.moreEvents a:hover {
    color: #000;
}

EDIT: Since zim2411 said that it worked for him in both Chrome and Firefox, I decided to try it again today and it worked! The only thing that I could think of that I did between yesterday and today was clear the caches of all my browsers and such. I'm guessing it has something to do with visited links because when I click on the "Spring Commencement" link and then go back to that page, the transition no longer works. Can anyone else confirm that the transition doesn't work after visiting the link? It still only happens in Chrome...

Upvotes: 1

Views: 3243

Answers (1)

Dennis Fagan
Dennis Fagan

Reputation: 551

The transition works for me however all your animations are set to the wrapping moreEvents div. since you are hovering over the div and not the a tag that is wrapped up in there you wont see the text color animate until you move to the middle more.

My suggestion is remove the padding from more events and place it on the a tag while adding display block i.e.

.moreEvents {
padding:0px;   
}
.moreEvents a {
padding:10px 0;
display: block;
}

EDIT: Upon further investigation This actually appears to be a known bug which should be fixed in v18. http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

Upvotes: 1

Related Questions