Переход CSS мерцает с: посетили в Safari, Chrome и Firefox, но не в Opera

(Для браузеров, поддерживающих переходы CSS, включая последние версии Firefox, Safari и Chrome. Как ни странно, эта проблема не возникает в Opera.)

Кто-нибудь еще заметил это? Когда вы помещаете цветовой переход в ссылку, a:visited переходит к цвету a:link перед отображением цвета a:hover. Проверьте это:

http://jsfiddle.net/Mgzv9/2/

Можно ли избежать мерцания этого цвета?


css css-transitions anchor
person Zade    schedule 18.10.2011    source источник
comment
А последний Chrome даже не выполняет переходы по посещенным ссылкам...   -  person Zade    schedule 21.03.2012

Ответы (2)


arrow_upward
1
arrow_downward

Я некоторое время ломал голову над этой проблемой.

Дело в том, что эту проблему на самом деле трудно воспроизвести.

Итак, что происходит, иногда при загрузке/обновлении страницы с переходом цвета на ссылки цвет сначала переходит от цвета ссылки браузера по умолчанию к цвету, определенному в CSS. На самом деле у меня этого не происходит, когда я открываю HTML с диска, но если я помещаю его на сервер (даже локальный сервер), то возникает эта проблема.

Чтобы воспроизвести проблему, создайте HTML, добавьте таблицу стилей и определите переход для ссылок, например:

a {
  color: red;
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    -o-transition: color .5s linear;
    -ms-transition: color .5s linear;
    transition: color .5s linear;
}

a:hover {
  color: green;
}

... а затем включите таблицу стилей в свой HTML.

Поместите файлы на сервер и попробуйте открыть страницу в Chrome, попробуйте обновить сайт, иногда вы должны сначала увидеть переход от стандартного синего цвета при загрузке страниц.

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

Если вы также включаете некоторые файлы Javascript, просто включите Javascript ПОСЛЕ включения вашего CSS.

Это даже сработает, если вы просто включите пустой файл JS после таблицы стилей.

Надеюсь это поможет!

person Primož Švent    schedule 05.12.2011
comment
Как интересно. Я не нахожу, чтобы ваше исправление Javascript имело какое-либо значение. Загляните, например, на soulmastery.net. Я также не нахожу никакой разницы между просмотром локальных файлов и файлов сервера. Проблема остается в Safari 5.1.2 и Firefox 8.0.1 (под управлением OS X Lion). К счастью, похоже, что Chrome устранил проблему (в версии 15.0.874.121). - person Zade; 06.12.2011
comment
Ошибка/функция (трудно сказать, потому что это, очевидно, результат некоторого предполагаемого поведения) все еще присутствует в Chrome 25 и FF 24, но исправление РАБОТАЕТ. Я поместил свой JS тег out of head (и вы обязательно должны поместить его после ссылки css) - и он работает! цитата: Все, что находится в голове, должно быть завершено до того, как загрузится тело, поэтому вообще плохая идея помещать туда javascript. Если вам что-то нужно, пока грузится тело, или хотите ускорить какой-то ajax, то будет уместно поставить это в голову. Это касается, например. wp_head() [WordPress], который должен идти непосредственно перед ‹/head›. - person ; 24.09.2013

arrow_upward
0
arrow_downward

Я никогда не видел, чтобы это происходило при использовании цвета. Но да, это происходит при использовании изображений в фоновом режиме. Это связано с увеличением времени загрузки, и этого можно избежать, используя все переходные изображения в одном большом изображении и используя свойство baground-position для управления изображением.

person Exor    schedule 18.10.2011
comment
Это происходит в трех последних браузерах; проверьте JSFiddle. - person Zade; 18.10.2011