Анимация артефактов с помощью jQuery в Google Chrome (красное / синее смещение)

Question

Я пытаюсь анимировать DIV с прозрачным фоном.JS здесь -> http://pastebin.com/fvK2FV5W

Анимация работает отлично, но на экране появляются артефакты при анимации влево и вправо (вверх и вниз не затрагиваются).

СИМПТОМЫ:

• При анимации влево я получаю КРАСНЫЕ линии, штрихующие от самых правых белых пикселей.

• При анимации вправо, я получаю СИНИЙлинии, расходящиеся от крайних левых белых пикселей.(см. http://i.imgur.com/7Q6rp.png)

• происходит только при анимации вправо / влево, а не вверх / вниз

• Chrome (17.0.9), jQuery (1.7.1), Windows 7

Я никогда не видел этого раньше, и это происходит только в Chrome (v 17.0.9).

Есть мысли о том, что можетбыть причиной этого?

---

РЕДАКТИРОВАТЬ // ИСПЫТАНИЯ:

• При изменении цвета текста с белого на синий и с белого на красный - полосы отражаютцвет текста. Сделайте текст красным ... синие линии черным. Сделайте текст синим ... красные линии черным.

• Отключено webGL - ничего не изменилось.

• Полосы появляются только тогда, когда анимация движется медленнее, чем на определенной скорости. При уменьшении анимации вправо, я получаю линии, которые выглядят как http://i.imgur.com/7Q6rp.png

• Спасибо Beetroot-Beetroot за то, что он сказал, что это может быть результатом чрезмерной сложности в моем коде. Похоже, это может быть проблемой, все еще тестирую.

Answer 1

См. принятый ответ stackoverflow здесь.

Короче говоря: добавление 1px левого или правого отступа к затронутому элементу решило проблему для меня! Что-то связанное с перерисовкой / рендерингом шрифтов в webkit.

Answer 2

Circusdei, ваш текущий код намного сложнее, чем нужно.Пожалуйста, прежде чем делать что-то еще, рассмотрите обратные вызовы завершения jQuery и цепочки анимации - см. animate () в документации jQuery .

Чтобы что-то произошло, когда анимация jQuery завершена, нет необходимости ожидать завершения с отдельной setTimeout;вместо этого укажите «полную» функцию обратного вызова.Например, первый случай может быть переписан следующим образом ...

javascript:

case "top":
    slide.animate({top: verticalGutter+'px'}, slideTimeIn, 'easeInOutQuad', function(){
        slide.animate({top: (verticalGutter+extraSlide)+'px'}, slideTimeFloat, 'easeOutQuint', function(){
            slide.animate({
                top: (viewportHeight-slideHeight)+'px',
                opacity: 0
            }, slideTimeOut);
        });
    });
break;

Обратите внимание, как функции обратного вызова «что делать, когда он закончен» задаются как последний аргументвнешние две анимации.Самая внутренняя анимация не имеет обратного вызова.

Это (в несколько раз), вместе с устранением ненужных перевода строки, значительно сократит ваш код.Он станет более читабельным и может даже избавиться от неприятного артефакта красных / синих линий в Chrome.

РЕДАКТИРОВАТЬ: На самом деле это может быть еще проще.Поскольку тема последовательных анимаций одинакова во всех трех случаях, jQuery позволяет вам создать цепочку анимации следующим образом:

javascript:

case "top":
    slide.animate({
        top: verticalGutter+'px'
    }, slideTimeIn, 'easeInOutQuad').animate({
        top: (verticalGutter+extraSlide)+'px'
    }, slideTimeFloat, 'easeOutQuint').animate({
        top: (viewportHeight-slideHeight)+'px',
        opacity: 0
    }, slideTimeOut);
break;

РЕДАКТИРОВАТЬ 2: См. http://pastebin.com/aHxUsL78 чтобы понять, насколько этот код может упроститься.