мигащи изображения при задържане с CSS преход и непрозрачност

някой знае ли защо в браузърите webkit (chrome, opera) изображенията при задържане мигат? Този случай е само във втора колона. Има пример http://codepen.io/anon/pen/fxJAk

Как мога да го поправя? Грешка ли е само в браузърите webkit? Работи правилно на firefox и дори на Internet Explorer 11.

Има версия на chrome 33.0.1750.146, Opera 20.0.1387.64


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)


Опитайте да добавите 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

Обичайното заобиколно решение (за WebKit) е да добавите:

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

Актуализиран codepen

person Jason Yaraghi    schedule 06.03.2014