Почему дергается текст в меню при смене картинок в слайдере?

Question

[GameOverr]

Eсть горизонтальное меню на чистом css и есть слайдер на javascript.
Kаждый раз при смене картинок в слайдере все пункты меню дергается (становятся какими то размытыми).

Еще заметил этот же эффект при применении -transition к пунктам подменю.

И фигня это только в google chrome, как исправить подскажите!

Вот пример (наведите курсор мыши на пункт Уроки), у меня меню немного другое, но эффект тот же:
www.rudebox.org.ua/demo/dropdown-menu-concept

Comments

[demimurych]

ссылка на пример не открывается.

[Alex Pro]

ваш пример в FF 26.0: тоже немного "подрагивает".
Ниже ссылка на jsfiddle.
Проблема в том, что вы прячете подменю и пункты подменю.

Answer 1

[Alex Pro]

jsfiddle.net/Stillborn/mHjV3
Забирайте, изучайте
P.S.: Зачем прятать .submenu li, если вы уже спрятали .submenu?

Comments

[GameOverr]

вот это оно, спасибо ))

Answer 2

[maxaon]

bit.ly/1bKyt83
Вам поможет правило
-webkit-backface-visibility: hidden;

Comments

[benderskiy]

Вы проверили на примере автора? У меня вот ничего не вышло... Если у вас получилось, скажите пожалуйста, к каким элементам вы применили это свойство.

[GameOverr]

не помогло, но спасибо

[maxaon]

@benderskiy Быстро проверил на *. Не совсем корректен результат (пропал фон) но дерганье и размытие ушло.

Answer 3

[benderskiy]

Если я правильно понял суть проблемы, попробуйте добавить к

-webkit-transform: <ваши преобразования> translate3d(0, 0, 0);

Например, на сайте по ссылке я добавил:

.menu > li {
  -webkit-transform: skewX(25deg) translate3d(0, 0, 0);
}
.menu > li > a {
  -webkit-transform: skewX(-25deg) translate3d(0, 0, 0);
}

и основные пункты меню перестали «скакать»

Comments

[GameOverr]

У меня при использовании translate3d(0, 0, 0) и translateZ(0) все пункты становятся размытыми, но больше не дергаются ))