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

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

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

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

Ответы

Ответ 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)