Блог

Недавно у меня возникла проблема с производительностью в приложении, которое я разрабатывал для Android, несмотря на то, что тег hardwareAccelerated в манифесте включен.

Анимации и общие динамические изменения стиля занимали целую вечность. Например, для отображения следующего фрагмента кода потребуется секунда или две:

 <script>
    var elem = popup;
    elem.style.display = 'block';
</script>

<style>
    #popup {
        display: none;
    }
</style>

<div id="popup">1, 2, 3...</div>
  

Затем я обнаружил трюк, который я ранее находил в прошлом и забыл о:

 -webkit-transform: translate3d(0, 0, 0);
  

Это отлично работает, но я немного смущен тем, к какому классу / элементу это относится.

Ранее я использовал следующее:

 * {
    -wekbit-transform: translate3d(0, 0, 0);
}
  

Который работал нормально, но на странице у меня был UL прокрутки, UL плохо отображался после прокрутки, поэтому после небольшого поиска в Google я изменил * { ... } body div { ... } , и это кажется намного более надежным.

Итак, возникает вопрос: существует ли конкретный селектор, к которому, как правило, применяется -webkit-transform ? Я думал, что в данном случае это анимируемый элемент #popup , но когда я попытался это сделать, никакой радости…

Я надеюсь, что это имеет смысл. Спасибо.

Я удалил его, поскольку это вызывало странное поведение на маленьких экранах (смартфоны / портреты). Родительский селектор, который имел

 .container > * {-webkit-translate3d(0,0,0)}
  

вызванный коллапс во вложенных элементах. Я заметил это только на маленьких экранах, и я мог найти любое достойное решение.