Мобильная версия
↑ Это «нормально». Размытие работает так, как ожидалось. Контейнер размытия не затрагивает края области просмотра.
↑ Здесь контейнер размытия достигает краев области просмотра. Он пробует белый цвет из моего браузера. Это именно то, чего я не хочу.
↑ Здесь я переключил свой браузер в темный режим. Теперь он использует черный цвет из моего браузера, поэтому проблема в этом случае не видна, но все еще существует. Это только для того, чтобы проиллюстрировать, откуда возникла проблема. Мне НЕ нужна выборка за пределами области просмотра.
Контейнер размытия (.inner) имеет фоновый фильтр:blur(50px) и фоновый цвет: черный 20%.
Код: Выделить всё
[img]https://media.istockphoto.com/id/1461883500/vector/dark-grainy-color-gradient-wave-background-purple-red-yellow-blue-colors-banner-poster-cover.jpg?s=1024x1024&w=is&k=20&c=hn5m4QqOsGZXyOrVeTRha6voBVVod97vUeEWF5BaqgE=[/img]
Lorem ipsum
Donec posuere pretium semper. In eget dui posuere, laoreet eros ac, pharetra libero. Ut pharetra sagittis nisl, non tempus erat faucibus in. Vestibulum porttitor ex maximus, ornare arcu ut, consectetur nunc. Phasellus id elit quis enim luctus condimentum. Nulla facilisi. Integer eu hendrerit eros. In faucibus tincidunt orci, eget commodo lectus rutrum vel. Duis porttitor, justo in laoreet mollis, urna sem convallis odio, ut placerat diam velit non risus. Mauris a condimentum felis, in posuere nibh. Curabitur et consequat mi. Donec egestas nec sapien vel tincidunt. Mauris suscipit dolor maximus ipsum imperdiet, sed gravida lectus rhoncus. Fusce dui magna, tincidunt a hendrerit sit amet, pretium at justo.
section {
position: relative;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.container {
height: 100vh;
position: relative;
z-index: 10;
padding: 100px 25px
}
.inner {
padding: 15px;
background-color: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(50px);
color: white;
}
Проблема проявляется (насколько я тестировал) в Google Chrome и Microsoft Edge, а не в Safari.
Кто-нибудь знает решение, как убрать «свечение»? Кажется, он выбирает цвет браузера.
Подробнее здесь: https://stackoverflow.com/questions/798 ... hrome-edge
