Как убрать мерцание ссылок с transition в хроме при обновлении браузера?

Question

[Senseich]

Всем привет! Подскажите, как бороться с мерцанием ссылок ... в меню прописал для ссылок свойство для цвета: transition: color .3s linear;
При загрузке и обновлении странички, ссылки получается мерцают, меняют цвет от фиолетового/синего до моего заданного. Я так понял, это цвет (фиолетового/синего) браузера изначальный. В опере и мозиле такого не наблюдается. И вот, что я заметил:

1) Если сайт смотреть на локалке, то это мерцание при каждом обновлении страницы:



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


Можно посмотреть здесь: https://appsits.000webhostapp.com/

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

P.S: Посмотрел сайтов 20, где так же сделано ссылки с transition, но там такого мерцания нет, хотя всё тоже самое сделано. Я так и не понял как эта проблема решается. Помогите разобраться.

Comments

[ma4t]

у меня нет никакого мерцания. Задавайте св-ва , которые меняете самому тегу "а"
Посмотрел, у Вас там задана не понятно где, то родителю, то еще выше. Если вешаете ховеры, либо еще что-то делайте это на сам тег. Тогда может уйдут проблемы.
И уж тем более если перезадаете цвет с дефолтного.

[Senseich]

ma4t, Св-во transition у меня на ссылке задано или вы про что имеете ввиду? Возможно вы этого не видите, потому что страница закэшировалась, попробуйте адрес скопируйте и вставьте в новом окне

Answer 1

[Ричард Гитис]

<script> </script> В конец head и мерцания пропадут, не убирайте пробел.

Answer 2

[Дмитрий Борисов]

Здесь https://appsits.000webhostapp.com/ Мерцание не происходит
Здесь ambientfeel.com/test/index.html Они точно есть

Есть возможно предоставить исходники? В стилях на первый взгляд ничего не нашел

Comments

[Senseich]

Дмитрий Борисов, да конечно https://yadi.sk/d/SD6tuU5b_1uNIw

https://appsits.000webhostapp.com/ - возможно на этом хостинге как то иначе кэш работает, но мерцание есть если открыть в новой вкладке, при первой загрузке.

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

[Дмитрий Борисов]

Senseich, Вот теперь проблема должна решиться 100% !

в стилях добавить :

.load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

и добавить в index.html скрипт

<script>$(window).load(function() {
  $("body").removeClass("load");
});
</script>

[Senseich]

Дмитрий Борисов, да я видел этот пример в той ссылке, которую вам дал, но не думаю, что все так делают ... про эту проблему так мало написано на удивление, хотя сайтов с транзишином ссылок сотни. Т.е. это рядовой случай, который как я думал уже давно разобран. На подобии - все же знают про лишние отступы inline элементов, это уже как аксиома, и тут самое распространенное применение transition, должно уже быть от такого панацея давно. )

[Дмитрий Борисов]

Senseich, но проблему ведь решает на 100%

Answer 3

[Piombo]

А есть ли объяснение этому фокусу со <script> </script> ?