Проблема перекраски Webkit: масштабирование трансформации + изменение позиции - PullRequest
2 голосов
/ 06 августа 2011

Я обнаружил странное (?) Поведение, когда я анимирую свойства transform и left / top. Я использую jQuery + некоторый помощник для работы с преобразованием (он просто добавляет префиксы вендора и исправляет некоторые из них, которые не должны быть причиной проблемы, о которой я говорю). Таким образом, JQuery прекрасно работает и делать это хорошо. Когда вы анимируете масштабирование по отдельности и лево / верх - это тоже работает, но не тогда, когда вы делаете это ВМЕСТЕ.

Вот мой демонстрационный пример: http://noname.vrn.ru/transform/test.html

Как вы можете видеть во время анимации, оба свойства изменяются, но свойства позиции не влияют на экран - http://vns.ru/screenshots/transform-20110806-140111.png. Далее, когда анимация закончится, вы можете изменить размер окна, и блок будет занимать новую позицию, которая должна быть проводится во время анимации. Таким образом, это означает, что после изменения размера происходит «перекраска» процесса, и элемент меняет его положение. Но процесс перерисовки также происходит при каждом шаге анимации, поэтому, почему новое значение свойства left не применяется?

Впервые я увидел эту проблему в Chrome 12. Я также тестировал Safari 5.0.x, и там не было никаких проблем, затем они выпустили 5.1, и в новой версии мы можем видеть ту же проблему, что и в Chrome. В FF4-5 работает нормально.

Может ли кто-нибудь объяснить мне такое поведение браузеров Webkit?

1 Ответ

9 голосов
/ 06 августа 2011

Вам нужно запустить аппаратное ускорение на слое:

#block {
    -webkit-transform-style: preserve-3d;
}
...