Баги рендеринга

02/07/2013

К несчастью, я очень часто ловлю баги, связанные с рендерингом элементов в хроме, а найти и зафиксить их - целая проблема. Как правильно, на это уходит не один день тщетных и утомительных поисков. Поэтому расскажу о них здесь, вдруг кому пригодиться.


Итак, если у вас возникла проблема с рендерингом (и нужный вам элемент по какой-то причине не отрисовывается вообще или не перерисовывается нужным образом), проверяйте следующее:


  1. Translate3d
    1. На LeedsUni у меня была карусель и на ней возник следующий баг: когда слайдер сдвигался влево, вместо левого слайда отображался самый левый слайд, а не предыдущий. В коде при этом все было правильно, т.е. нужный мне элемент просто не прорисовывался.

      После нескольких дней усердных поисков выяснилось, что карусель использует для сдвига элементов в хроме translate3d. Простая замена translate3d на translate решила проблему.

    2. Сейчас работаю с Mapbox и нужно было опять реализовать карусель, но с fade-эффектом. На блоке с Mapbox fade-эффект не работал, т.к. свойство opacity не применялось.

      Опять же после усердных поисков выяснилось, что для некоторых элементов карты применяется translate3d (маркеры, слои). Замена в коде translate3d на translate снова решило проблему.

    В связи с этим хочу сказать, что Translate3d может не только избавить вас от проблем с мерцанием и плохой отрисовкой, но и добавить вам таковых. Применяйте его осторожно.

  2. Opacity и z-index
  3. С той же самой каруселью с fade-эффектом, о которой говорила ранее, обнаружился еще один баг в хроме. Для реализации fade-эффекта использовалось изменения z-index и opacity. Но на некоторые блоки opacity почему-то не накладывалось и элементы при сдвиге карусели оставались непрозрачными, fade эффекта не наблюдалось вообще, и все было очень некрасиво. Opacity:1 вообще приводило к тому, что элементы опять же не отрисовывались.

    Оказалось, что в некоторых страницах карусели я для фона использовала видео и слайдеры. Чтобы эти элементы не перекрывали текст, я им добавила отрицательные z-index. Видимо, хром считал, что раз z-index отрицательный то и перерисовывать элемент не надо. Все исправилось увеличением z-index > 0.

Вывод: старайтесь не использовать отрицательный z-index, а если используете - внимательно тестируйте все в хроме на предмет рендеринга.

Вот и все. Надеюсь, это однажды сможет кому-то сэкономить много времени :)


Следующая:  Баг с шириной в процентах и как его фиксить

Предыдущая:  Scrollbar на Mac

Другие статьи


Тел. 8 (800) 7075374
8 (351) 2251874