«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

[mu3]

Проголосовало 390 человек и ни одного комментария?!
По делу: из enewsey.ru вы уже убрали translateX? Увидел только у поискового input.
И можно ли в DevTools искать DOM объекты по CSS свойству? Например, по тому же «translateX».

[olegafx]

Ничего не убирал. Просто оно лежит в ng-animate у AngularJS.
Искать — не видел такого.

[mu3]

Так у киках объектов выставлен translateX?
Перебрал все повторяющиеся, ни у кого не увидел.
Да и не смог достичь таких медленных fps, поэтому подумал, что уже убрали translateX (возможно, просто для OSX это лучше оптимизировано)

[olegafx]

У всех, у которых указана директива ng-animate. Это все li в ul.

<li data-ng-repeat="article in articles | filter:{author:predicate} | filter:search | orderBy:'-date'" data-ng-animate="{enter: 'fadeIn', leave: 'fadeOut'}">

.fadeIn, .fadeIn-active, .fadeOut, .fadeOut-active {
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    -o-transition: all linear .5s;
    transition: all linear .5s;
}

.fadeIn {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

.fadeIn-active {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.fadeOut {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.fadeOut-active {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}