В iOS Safari не хватает памяти с помощью "-webkit-transform"

http://jsfiddle.net/ES4xG/8/ приводит к сбоям большинства устройств сетчатки.

iOS Safari "легко" исчерпывает память и сбой при использовании некоторых инструкций -webkit-transform. Этот подход обеспечивает впечатляющую графику, но, особенно на дисплеях сетчатки, просто кажется, что они потребляют много памяти и вызывают сбои.

Демонстрация выше показывает, что текст отображается 150 раз, что в противном случае запускалось бы нормально в браузере ПК:

Размер шрифта и количество элементов преувеличены, чтобы вызвать сбой. -webkit-transform: translate3d(0,0,0) предназначен для принудительного рисования графическим процессором каждого элемента.

В реальном приложении мы используем translateX, Y, Z, scale и другие, которые, похоже, подключены к GPU одинаково. Изображения и спрайты также используются, но они не связаны непосредственно с авариями.

Учитывая приведенный выше сценарий:

1) Является ли это ошибкой, с которой сбой iOS Safari?

2) Включение монитора памяти Apple Instruments, виртуальная память поднимается и, похоже, является виновником аварии. Что именно использует эта память?

3) Есть ли другой ускоренный подход к графическому процессору, который бы не потреблял много памяти?

Ответ 1

Он выходит из строя, потому что высота всех аппаратных ускоренных элементов составляет 257 025 пикселей в вашем примере. В моих тестах оказалось, что мобильное сафари может обрабатывать около 20 000 пикселей в высоту до того, как оно сработает.

Аппаратное ускорение удивительно, но не злоупотребляйте им, используя его для всего.

Чтобы отладить его, вам нужно будет запустить Safari на Mac с терминала со следующими ключами:

$> export CA_COLOR_OPAQUE=1 
$> export CA_LOG_MEMORY_USAGE=1
$> /Applications/Safari.app/Contents/MacOS/Safari

CA_COLOR_OPAQUE показывает, какие элементы ускоряются. CA_LOG_MEMORY_USAGE показывает, сколько памяти используется для рендеринга.

Подробнее см. следующие ссылки:

Ответ 2

попробуйте использовать это в родительском элементе, который вы преобразовываете

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

и это для лучшей производительности на вашем преобразованном элементе

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Ответ 3

Google Chrome сбрасывает минуты после запуска -webkit-transform анимации Javascript для текста. Я использовал как rotate(), так и rotateZ(), и, особенно когда отображается анимированный текст, использование памяти, как сообщается ОС, увеличилось до тех пор, пока не произойдет ошибка Aw, Snap!,

Использование Google Chrome 31.0.1650.63, Blink engine 537.36 под 64-разрядной версией Windows 7.

Протестировала ту же анимацию в Firefox 25.0.1, и она не обнаружила никаких проблем.

Я даже подумал, что Tristan Engine (моя собственная JS-библиотека) имеет серьезные утечки памяти, но проверен на графике памяти > График работы > Timeline и не показывает никаких указаний.

Наличие -webkit-transform на изображении или пустой DIV не покажет эту ошибку.

Анимация одного и того же текста с простыми свойствами CSS2, такими как left: или top:, не обнаружит эту ошибку.

Уже отправлен отчет об ошибке в Google. Мне потребовалось три часа, чтобы понять, что случилось.

Отчет об ошибке: https://code.google.com/p/chromium/issues/detail?id=328245&thanks=328245&ts=1386906785