Потеря производительности из-за filter: blur(1px)

Question

Есть на фоне Svg картинка, и я хотел немного её размыть на отдельном блоке. Но как только я добавляю filter: blur(1px), прокрутка начинается с задержкой, и сильно замедляется. Есть ли способ избежать потери производительности при использовании этого фильтра?

Upd. - Откройте код на всю страницу, в маленьком виде, лагов не видно

Upd. 2 - По всей видимости, проблема в Chrome. Тк, в Firefox, с этим всё нормально

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Hero Light", Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #fff;
}

*:after,
*:before {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
  font-size: 34px;
}

.background {
  content: " ";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://cdn.shopify.com/s/files/1/0143/4478/1878/articles/lotus_flower_symbol_1200x1200.jpg?v=1553953163") no-repeat center fixed;
  background-size: cover;
  opacity: 0.3;
  filter: blur(1px);
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.block object {
  width: 200px;
}

.block p {
  font-size: 100px;
  letter-spacing: 10px;
}

<div class="background"></div>

<div class="content">
  <div class="block">
    1
  </div>
  <div class="block">
    2
  </div>
  <div class="block">
    3
  </div>
  <div class="block">
    4
  </div>
</div>

БЛОГ НА HUSL

Потеря производительности из-за filter: blur(1px)

Ответы (0 шт):