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

Question

Ссылки в левом меню на этом сайте имеют свойство 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 бета.Однако, если вы столкнулись с этой проблемой, посетите отчет об ошибке, указанный в принятом ответе ниже, и отметьте проблему.

Answer 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

Answer 2

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

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

Answer 3

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

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

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

(...)

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

Answer 4

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

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

Answer 5

Как писал Даррен Ковальчик в своем ответе (https://stackoverflow.com/a/8524199/1010777), в 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; }
}

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

Answer 6

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

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

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

#menu a:hover {
  color: black;
}

Answer 7

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

Answer 8

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

Answer 9

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

edit: Примерно так: http://jsfiddle.net/qtzEj/

Надеюсь, это поможет:)