Skip to content

Fix safari blur perfomance

Petrov Ioann requested to merge feat/fix-safari-blur-perfomance into dev

Исправление css свойства filter: blur() в браузере Safari.

transform: translate3d(0,0,0) заставит браузер использовать ускорение GPU для этого конкретного элемента вместо CPU.

Написал миксин blur с возможностью дополнить правило filter и поместить другие свойства внутри блока:

@include blur(1px, hue-rotate(45deg), sepia(1)) {
  background: white;
}

Источники:
https://graffino.com/til/how-to-fix-filter-blur-performance-issue-in-safari
https://stackoverflow.com/questions/70138527/css-filter-blur-not-working-properly-on-safari

Merge request reports