Fix safari blur perfomance
Исправление 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