Как увеличить fps в css?

Question

[Антон]

Такая проблема: у меня фоном 2 fixed блока, один - с фоновой картинкой, scale, blur, gradient. Проблема: страница подлагивает, (хотя никаких операций с блоком не производится включая прокрутку - блок растянут во весь экран) включая все анимации. Как это оптимизировать?

.body:before {
            content: "";
            position: fixed;
            left: 0;
            right: 0;
            z-index: -9999;
            display: block;
            width: 100%;
            height: 100%;
            background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%), url('photos/1.jpg') no-repeat;
            background-size: cover;
            -webkit-filter: blur(15px);
            -webkit-transform: scale(1.2);
        }
        .body {
            position: fixed;
            left: 0;
            right: 0;
            z-index: -1;
        }

<div class="body"></div>

Answer 1

[Oogway]

Попробуйте этот способ frontender.info/pointer-events-60fps

Answer 2

[mihail_belyaev]

Свойство filter: blur() убивает FPS
Можете даже попробовать постепенно уменьшать радиус размытия и наблюдать за ускорением смены кадров.
Только что с этим столкнулся.