Опровержение :)

Несколько дней назад в твиттере я пожаловался на то, что webkit ведёт себя не вполне адекватно. При применении к элементу свойства transform, у него меняется позиция, причём по какой логике вычисляется новая позиция для меня было непонятно. Так вот webkit тут не при чём, новые координаты очень даже логичны :). Проблема возникла из-за использования jquery. Вообще говоря, использование библиотек значительно упрощает разработку, т.к. позволяет не отвлекаться на особенности браузеров. Но иногда случается так, что результат совсем не такой как ожидалось, и по привычке библиотека непогрешима, а проблема где-то в другом месте.

Проблема оказалась в том, что jquery “неправильно” определяет позицию в webkit, так и в опере, а в firefox “правильно”. jQuery пытается определить позицию элемента как можно быстрее, и пытается использовать максимально, то что предоставляет браузер. В webkit и presto есть метод getBoundingClientRect, который возвращает прямоугольник ограничивающий элемент. Его то и использует jQuery для нахождения позиции. И естественно, что при трансформации размер ограничивающего прямоугольника изменяется. В результате позиция оказывается в том месте, в котором ожидаешь, только у firefox, у которого метод getBoundingClientRect отсутствует. Следует отметить, что в mootools позиция определяется подобным образом, и назвать такое поведение неправильным нельзя. Но не смотря на это проблема имеет место быть, т.к. используя такого рода библиотеки, ожидаешь получить одинаковый результат во всех браузерах.

Пример. Чёрная точка с красной границей находится в позиции, которую возвращает метод position() зелёного квадрата. Зелёный квадрат повёрнут на 45 градусов. Ещё одна особенность в том, что webkit начинает отрисовку после события DOMContentLoaded, поэтому позиция определяемая в функции, которая передается в ready(), ещё “правильная”. Клик по зелёному квадрату заново получает его позицию и перемещает туда точку.

А новая позиция показалась мне не логичной, потому что использовался margin-left, и соответственно новая позиция была сдвинута на значение margin от ожидаемого.

Особенности особенностями, а “правильную” позицию получать надо. Делается это просто, к трансформируемому элементу добавляется враппер, и уже его координаты используются.