-webkit-transform: переводить блочный рендер на iPad

Question

-webkit-transform: переводить блочный рендер на iPad

Итак, я понимаю, что translate / translate3d использует графический процессор, но по какой-то причине он вызывает рендеринг крупной графики в виде блоков / блоков на iPad. Я испытываю трудности с поиском где-либо, где указана максимальная ширина / высота для изображений при использовании перевода.

Я хотел бы иметь возможность использовать CSS-переходы в свойстве transform, но не могу из-за этой проблемы. Даже CSS-переходы в свойстве top выполняются медленнее, чем при использовании чего-то вроде jQuery.animate().

Любой совет по этому поводу?

4

css3 ipad gpu translate3d webkit-transform

Источник

user359239 29 июл '12 в 08:24

1 ответ

Другие вопросы по тегам css3 ipad gpu translate3d webkit-transform

user602734 07 сен '12 в 06:47 2012-09-07 06:47 · Answer 1 · 2012-09-07 06:47

У меня была точно такая же проблема, и я имел большой успех с этим маленьким камнем CSS:

-webkit-backface-visibility: hidden;

Я обнаружил, что добавление этого к любому элементу, который был анимирован, разрешает "блочный" рендеринг. В некоторых случаях мне также приходилось добавлять его в дочерние элементы, например. У меня был большой div-обертка, и я использовал translateX для настройки x-позиции. Я добавил волшебную строку CSS к div-обертке, а также к прямым дочерним элементам этого div (которые были моими областями контента). Поиграйте с этим, и вы, надеюсь, разберетесь!