Переход цвета CSS3 не работает в Chrome

Ссылки в левом меню этот веб-сайт имеют свойство перехода CSS3 для color, которое изменяется при наведении мыши. Он не работает в Chrome 16 или 17 (изменение цвета внезапно), тогда как другие переходы на веб-сайте. Он работает в Firefox, Opera и даже Safari, который использует webkit, например Chrome, поэтому я не думаю, что это может быть проблемой с моим CSS. Что тогда?

Здесь мой CSS этой части (полный CSS здесь):

#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}

#menu a:visited
{
color: gray;
}

#menu a:hover
{
color: black;
}

ОБНОВЛЕНИЕ! По-видимому, это, вероятно, было исправлено в 18 бета-версии. Однако, если вы столкнулись с этой проблемой, перейдите к отчету об ошибке, указанному в принятом ниже ответе, и запустите эту проблему.

Ответы

Ответ 1

@Nijikokun Я могу подтвердить то же самое.: посещенные ссылки не корректно переходят в Chrome. Ура. Похоже, что это проблема, которая возникла в версии 16 и никогда не была исправлена. На сайте Chromium есть несколько отчетов об ошибках.

http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

Ответ 2

Я попытался найти обходное решение (подробнее в блоге: http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug)

Кажется, что если вы объявите: посещенный с цветом (цветным, фоновым, пограничным и т.д.) прозрачным, он будет работать как обходной путь. Я еще не тестировал экстенсивно, рад получить обратную связь.

Ответ 3

Это не проблема-неработающая проблема, так это то, что: посещенная ссылка не переходит, поэтому она может работать для вас, если вы ее не нажали, но если она есть, это не будет.

Я не знаю решения, я все еще ищу...

Ответ 4

., Я подумал, что было бы приятно заметить, что это не ошибка, а намеренное поведение. Цитирование Документов разработчика Mozilla:

Влияние на веб-разработчиков

В целом, это не должно сильно влиять на веб-разработчиков. Однако есть несколько особых случаев, которые могут потребовать внесения изменений в сайты:

(...)

Переходы CSS не поддерживаются для посещенных ссылок. К счастью, переходы CSS очень новы, и на данный момент их мало, поэтому на данный момент это вряд ли затронет многих людей.

Ответ 5

Как писал Даррен Ковальчик в своем приложении (fooobar.com/questions/207579/...), у Chrome есть ошибка.

Возможным обходным путем является применение цветовой анимации в родительском элементе ссылки и установка цвета ссылки для наследования. В этом случае анимация работает хорошо, даже если ссылка: посещенная.

HTML:

<span class="whateverLinkParent">
    <a href="#">whateverLinkText</a>
</span>

CSS

.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
    0%, 100% { color: #686765; }
    50% { color: #2E2D2B; }
}

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

Ответ 6

Попробуйте использовать #ccc и # 000, а не серый и черный.

изменить:. Таким образом: http://jsfiddle.net/qtzEj/

Надеюсь, что помогает:)

Ответ 7

Две мои работы по переходу на связь, но остальные не находятся в хроме. Все они используют одну и ту же настройку. Кажется, они работают, когда ссылка является либо mailto: либо callto: - странно странно, если вы спросите меня.

Ответ 8

Если вы удаляете цвет из: посещенного поведения, он должен работать как ожидалось. Когда цвет задан в: посещенном поведении, даже: цвет наведения (без перехода) не работает должным образом.

Ответ 9

Я все еще сталкивался с той же проблемой и нашел решение, которое сработало для меня.

Мне удалось исправить это, используя псевдо-класс :link следующим образом:

#menu a, #menu a:link {
  color: gray;
  transition: color 0.5s;
}

#menu a:hover {
  color: black;
}