Странный переход CSS3 ... ошибка? - PullRequest
Новая
       7

Странный переход CSS3 ... ошибка?

1 голос
/ 21 марта 2012

Если вы посетите http://www.framingham.edu/ в последней стабильной версии Chrome, вы заметите, что переход CSS3 для ссылки «Spring Commencement» не работает. Он также не работает для текста «Больше событий» (но он работает для синего фона позади него). Если вы попробуете то же самое в Safari, Firefox или Opera, все будет хорошо. Я не очень понимаю, почему это происходит. Может ли это быть моим CSS3, что заставляет его ломаться специально для 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: Поскольку zim2411 сказал, что у него это работает и в Chrome, и в Firefox, я решил попробовать сегодня снова, и это сработало! Единственное, что я мог подумать о том, что я делал между вчера и сегодня, было очистить кеши всех моих браузеров и тому подобное. Я предполагаю, что это как-то связано с посещенными ссылками, потому что, когда я нажимаю ссылку «Начало весны» и затем возвращаюсь на эту страницу, переход больше не работает. Кто-нибудь еще может подтвердить, что переход не работает после посещения ссылки? Это все еще происходит только в Chrome ...

1 Ответ

1 голос
/ 21 марта 2012

Переход работает для меня, однако все ваши анимации настроены на обёртывание moreEvents div.так как вы наводите курсор на элемент div, а не на тег, заключенный в нем, вы не увидите анимацию цвета текста, пока не переместитесь в середину.

Я предлагаю убрать отступы из большего количества событий и местаэто на теге при добавлении блока отображения, т. е. 

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

РЕДАКТИРОВАТЬ: При дальнейшем исследовании Это на самом деле является известной ошибкой, которая должна быть исправлена ​​в v18.http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

...