Последствия добавления backface-visibility: hidden для *?

Question

[hackuun]

Наконец решил омерзительную проблему с со странным рендерингом во время транзишенов (на ярких бекграундах) добавлением этого

*, *:before, *:after
  backface-visibility: hidden

А теперь мучает вопрос - что меня ждет? Погуглил, везде пишут "Не-не-не, ни в коем случае". А конкретных последствий никто не пишет. Я потестировал на доступных устройствах + Browserstack, никаких проблем не вижу.

Ну так что тогда? Почему нет?

Answer 1

[Александр]

backface-visibility: hidden выводит элемент на отдельный GPU слой. Сам постоянно использую это свойство. Но при большом кол-ве элементов на странице анимации и страница в целом будут сильно тормозить на слабых устройствах. И да - иногда это наоборот повышает производительность, но нужно чётко понимать когда, зачем и где ты используешь это свойство. Я советую не использовать backface-visibility: hidden на всех элементах, а только там где это необходимо.

Comments

[hackuun]

Ок, но если я не добавляю это свойство ко всем элементам я вижу артефакты при транзишенах. Я пробовал добавить только к глючному элементу (и нескольким рядом, потому что не понятно что точно вызывает проблему), но все равно глитчи проскакивают. Только добавление к * помогло решить проблему.

[Александр]

hackuun, я вряд ли смогу сказать что-то более конкретное без конкретных примеров.

Answer 2

[AngReload]

Здесь https://caniuse.com/#search=backface-visibility есть несколько known issues, но ничего смертельного на мой взгляд.