мигающие изображения при наведении с переходом css и непрозрачностью

кто-нибудь знает, почему в браузерах webkit (хром, опера) мигают изображения при наведении? Этот случай только во втором столбце. Пример: http://codepen.io/anon/pen/fxJAk

Как я могу это исправить? Это только ошибка браузеров webkit? Он правильно работает в Firefox и даже в Internet Explorer 11.

Это версия Chrome 33.0.1750.146, Opera 20.0.1387.64.


google-chrome css css-transitions webkit
person ksh    schedule 06.03.2014    source источник
comment
Переходы интенсивно используют память, поэтому, возможно, это то, как Chrome отображает. Конечно, это перерисовка всего li, потому что у вас есть все на переходах. Попробуйте ограничиться просто непрозрачностью. Плюс (в заключение) у Codepen есть некоторые собственные проблемы с перерисовкой, особенно при использовании изображений-заполнителей, поскольку их нужно вызывать каждый раз, когда они рисуются.   -  person Paulie_D    schedule 06.03.2014
comment
неважно, это codepen или нет, и если я добавлю переход только для непрозрачности, такое же странное поведение. Я создал этот пример, потому что у меня есть эта проблема в моем живом коде разработки.   -  person ksh    schedule 06.03.2014
comment
Я не говорю, что codepen — это целая проблема, просто то, как Chrome выполняет рендеринг, почти наверняка отличается от того, как это делают другие браузеры. Учитывая специфику проблемы, вероятно, это движок рендеринга Blink.   -  person Paulie_D    schedule 06.03.2014
comment
codepen.io/anon/pen/Boecy остается прежним   -  person ksh    schedule 06.03.2014

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте добавить правила css для img ниже:

-webkit-transform:(0); -moz-transform:(0); -o-transform:(0); transform:(0);

http://codepen.io/anon/pen/FpwIy

person pomek    schedule 06.03.2014

arrow_upward
2
arrow_downward

Обычный обходной путь (для WebKit) — добавить:

img {
    -webkit-transform: translateZ(0);
}

Обновленная кодовая ручка

person Jason Yaraghi    schedule 06.03.2014