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

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

Translate3d

• На LeedsUni у меня была карусель, и на ней возник следующий баг: когда слайдер сдвигался влево, вместо левого слайда отображался самый левый слайд, а не предыдущий. В коде при этом всё было правильно, т.е. нужный мне элемент просто не прорисовывался. После нескольких дней усердных поисков выяснилось, что карусель использует для сдвига элементов в «Хроме» translate3d. Простая замена translate3d на translate решила проблему.
• Сейчас работаю с Mapbox. Нужно было опять реализовать карусель, но с fade-эффектом. На блоке с Mapbox fade-эффект не работал, т.к. свойство opacity не применялось. Опять же, после усердных поисков выяснилось, что для некоторых элементов карты применяется translate3d (маркеры, слои). Замена в коде translate3d на translate снова решило проблему.

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

Opacity и z-index

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

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

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

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