Edit: я сделал этот ответ, предполагая, что вы анимируете с переходами CSS3. Если нет, и вы можете, вы можете ожидать улучшения производительности ... Это стоит попробовать.
Проблема здесь заключается в том, что webkit должен перекрасить две действительно тяжелые тени. Это не кажется большой задачей, но если вы уберете встроенную тень блока для начала, я думаю, вы увидите неожиданное повышение производительности.
Я испытал скучную прокрутку на своем устройстве Android (браузер на основе Webkit) и провел это тестирование, чтобы определить, в чем проблема. Тень текста была несколько неактуальной в настройках типа пользовательского интерфейса. Градиенты также были довольно несущественными. Как только я нажал "тень от рамки", я заметил почти линейную прогрессию в производительности, когда я удалял радиус размытия пиксель за пикселем.
Например, радиус 6px может занять 80 мс для рендеринга на большом div. Если я уменьшу это до 3px, время рендеринга будет близко к 40 мс. 2 пикселя, около 20 мс.
Так что вы, возможно, захотите сдержать тень от рамки и просто использовать изображения, если это возможно, в противном случае просто используйте меньшую тень. Как только вы дойдете до того момента, когда webkit сможет перекрашивать пользовательский интерфейс не менее 20 раз в секунду на младшем устройстве, вы, вероятно, в порядке.
Это может показаться очевидным. Поскольку для качества рендеринга нет никакой возможности (например), вы не можете оптимизировать это, за исключением уменьшения масштаба ... Для мобильных устройств все, что вы можете сделать, - это сдержать эффекты и оптимизировать свои художественные работы на основе ваших ограничений. .