При использовании стиля glassmorphism и фильтра css backdrop-filter я получаю темный размытый край в верхней части элемента при прокрутке. Мне кажется, что это должно быть легко исправить, но я перепробовал все, что знаю (чего, видимо, недостаточно), и не могу понять, как это сделать. Я создал ручку, чтобы вы могли увидеть, о чем я говорю. По какой-то непонятной причине вы должны открыть его в codepen, чтобы увидеть нежелательный эффект.

body {
  background-image: url("https://www.theuiaa.org/wp-content/uploads/2017/12/2018_banner.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 200vh;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: soft-light;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  ширина: 320px;
  высота: 540px;
  фон: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
}

.arrow {
  position: sticky;
  top: 0px;
  font-size: 200px;
  line-height: 1;
  цвет: красный;
}

.card p {
  font-size: 32px;
  padding: 20px;
}

Как вы можете видеть при прокрутке вниз, как только карта попадает в верхнюю часть экрана, вы получаете размытый край. Не очень здорово...

Кодепен

Ответы (1)

Я думаю, вы нашли проблему в Chrome! (Этого не происходит в Firefox).

Я очень быстро проверил баги хрома и не нашел ничего близкого... Поэтому я предлагаю вам сообщить об этом!

Дополнительно, я провел тест, чтобы определить, откуда берется этот черный "градиент"... Я изменил цвет background в .main-header Codepen!!!

Чтобы воспроизвести, вставьте это в консоль:

document.querySelector(".main-header").style.background = "red"

Ожидаемый результат:

Главный заголовок CodePen в инспекторе

Но сюрпризом является то, что "градиент" теперь стал красным.
Вы, конечно, знаете, что результатом работы codepen является iframe... Поэтому я думаю, что это называется "проблема с краской".

CoderPen main header result

2022 WebDevInsider