Подтвердить что ты не робот

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

Im делает очень медленный переход фонового изображения (вид пространства, который медленно скользит влево). Моя проблема в том, что она выглядит красиво на Firefox, она выглядит ужасно в Chrome. Я получаю "дрожащий" эффект из-за отсутствия у Chrome субпиксельной рендеринга, и изображение просто привязывается к следующему пикселю. Я не могу ускорить изображение, потому что он уничтожит эффект, который я пытаюсь достичь. Я пробовал использовать трюки TranslateZ(), я пробовал каждый эффект CSS3, о котором я мог думать, чтобы он выглядел лучше, Ive пытался Kinetic.js, Ive даже попытался Babylon.js надеяться, что WebGL исправит мою проблему.

В этот момент Im в растерянности, и мне просто нужно предоставить пользователям Chrome статический фон и больше обслуживать пользователей Firefox в отношении аккуратных мелочей, которые я могу сделать для UI UX, а затем просто поставить отказ от ответственности на моем сайте говорят, что страницу лучше всего просматривать в FF.

Я ДЕЙСТВИТЕЛЬНО не хочу этого делать. Есть ли вообще работа вокруг?

4b9b3361

Ответ 1

Вы можете заставить субпиксельную визуализацию применить небольшое преобразование:

#container {
    transform: rotate(-0.0000000001deg);
    -webkit-transform: rotate(-0.0000000001deg);
}

Но вместо того, чтобы использовать JS для работы анимации, почему бы не использовать анимацию CSS3? Если вы используете transform: translate(), браузер по умолчанию будет использовать субпиксельный рендеринг.

Кроме того, поскольку производительность лучше, вы не должны получать свое дрожащее/волновое движение.

Подробнее о производительности здесь: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Я собрал здесь простую демонстрацию: http://jsfiddle.net/yrwA9/6/ (Для простоты я использовал только префиксы -webkit-vendor)