Загадочное явление с CSS filter
Есть некая страница, на которой вверху баннер. Баннер делал не я, он такой, как есть, исправить я его не могу
Вот как это выглядит
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Какой то заголовок</title>
<style>
.prep-banner {
width: 100%;
margin-bottom:14.7vw;
font-family: Arial;
}
.prep-banner>.tr {
z-index: -4;
position: absolute;
height: 0px;
width: 0px;
left: -30vw;
top: 0vw;
border: 12.6vw solid transparent;
border-right: 30vw solid transparent;
border-left: 30vw solid transparent;
border-top: 12.6vw solid #000066;
}
.prep-banner>.tr-w {
z-index: 9;
position: absolute;
height: 0px;
width: 0px;
left: 3.335vw;
top: 8.2vw;
border: 1.5vw solid transparent;
border-right: 3.57vw solid transparent;
border-left: 3.57vw solid transparent;
border-top: 1.5vw solid white;
}
.prep-banner .ipm {
position: absolute;
z-index: 6;
left: -2.5vw;
top: -2vw;
width: 14vw;
border: 0px;
}
.prep-banner>.first-line {
position: absolute;
z-index: 1;
top: 8.2vw;
height: 1.5vw;
background-color: #000076;
width: 100%;
}
.prep-banner>.first-line-w {
position: absolute;
z-index: 6;
top: 8.2vw;
height: 1.5vw;
background-color: white;
width: 6.905vw;
}
.prep-banner>.title>a {
position: absolute;
top: 0.93vw;
right: 1.6vw;
text-align: right;
font-weight: bold;
font-size: 4.5vw;
color: #000076;
}
.prep-banner>.crossref {
position: absolute;
z-index: 7;
right: 1vw;
top: 0.4vw;
width: 8.5vw;
border-width: 10px;
border-color: black;
}
/*
.prep-banner {
filter:invert(100%);
}
*/
</style>
</head>
<body>
<!-- Верхний баннер с эмблемой-->
<div class="prep-banner">
<div role="presentation" class="tr"></div>
<div role="presentation" class="tr-w"></div>
<a href="https://****" title="Головная страница"><img class="ipm" src="qqq.png"
alt="Эмблема " /></a>
<div role="presentation" class="first-line"></div>
<div role="presentation" class="first-line-w"></div>
<div class="title">
<a class="preprints" href="https://****" title="Что то">Что то написано</a>
</div>
</div>
<header class="p-title">
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
</header>
<main class="p-main p-offset">
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
</main>
</body>
</html>
Теперь раскомментарим строки в style, где filter
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Какой то заголовок</title>
<style>
.prep-banner {
width: 100%;
margin-bottom:14.7vw;
font-family: Arial;
}
.prep-banner>.tr {
z-index: -4;
position: absolute;
height: 0px;
width: 0px;
left: -30vw;
top: 0vw;
border: 12.6vw solid transparent;
border-right: 30vw solid transparent;
border-left: 30vw solid transparent;
border-top: 12.6vw solid #000066;
}
.prep-banner>.tr-w {
z-index: 9;
position: absolute;
height: 0px;
width: 0px;
left: 3.335vw;
top: 8.2vw;
border: 1.5vw solid transparent;
border-right: 3.57vw solid transparent;
border-left: 3.57vw solid transparent;
border-top: 1.5vw solid white;
}
.prep-banner .ipm {
position: absolute;
z-index: 6;
left: -2.5vw;
top: -2vw;
width: 14vw;
border: 0px;
}
.prep-banner>.first-line {
position: absolute;
z-index: 1;
top: 8.2vw;
height: 1.5vw;
background-color: #000076;
width: 100%;
}
.prep-banner>.first-line-w {
position: absolute;
z-index: 6;
top: 8.2vw;
height: 1.5vw;
background-color: white;
width: 6.905vw;
}
.prep-banner>.title>a {
position: absolute;
top: 0.93vw;
right: 1.6vw;
text-align: right;
font-weight: bold;
font-size: 4.5vw;
color: #000076;
}
.prep-banner>.crossref {
position: absolute;
z-index: 7;
right: 1vw;
top: 0.4vw;
width: 8.5vw;
border-width: 10px;
border-color: black;
}
.prep-banner {
filter:invert(100%);
}
</style>
</head>
<body>
<!-- Верхний баннер с эмблемой-->
<div class="prep-banner">
<div role="presentation" class="tr"></div>
<div role="presentation" class="tr-w"></div>
<a href="https://****" title="Головная страница"><img class="ipm" src="qqq.png"
alt="Эмблема " /></a>
<div role="presentation" class="first-line"></div>
<div role="presentation" class="first-line-w"></div>
<div class="title">
<a class="preprints" href="https://****" title="Что то">Что то написано</a>
</div>
</div>
<header class="p-title">
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
</header>
<main class="p-main p-offset">
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
</main>
</body>
</html>
Каков эффект! Я только цвета инвертировал. А куда все поползло? |
Вопрос закрыт. Объяснение простое - так устроен этот мир!
Все по спеке. При применении filter все дочерние элементы, имеющие абсолютное или фиксированное позиционирование, выносятся в некий отдельный блок, и считаются расположенными в нем. Так, оказывается легче производителем браузеров. Иначе у них проблемы с эффективностью рендеринга, аппаратным ускорением, и вообще куча тонкостей, которых нам не понять. |
>... которых нам не понять.
Ну почему же концепция "контекст наложения" вполне логичный и понятный механизм рендеринга страницы когда сам рендеринг разбивается на отдельные независимые части и по этому CSS свойства способные вызвать перерисовку всей страницы вместо этого создают отдельный "контекст наложения" и перерисовывают только его. |
Может там с точки зрения реализации что то и логично, но в том, что при изменении только цвета изменяется положение в пространстве, я никакой логики не вижу.
Это же начисто убивает смысл такой верстки. Если не могут иначе, то проще сказать сразу - не применяйте фильтры к элементам, у которых есть дочерние абсолютные, т.к. мы снесем эти дочерние и расположим их не там, где вам нужно, а там, где нам удобнее. Опять же это контекст не должен нарушать верстку. Если дочерние были внутри элемента, так они там должны и остаться по расположению. |
Ну по сути оно ведёт себя также, как если бы вы ему добавили
position: relative; или transform или backdrop-filter ... Надо просто помнить о таких вещах. Вообще пихать absolute в static - не очень хорошая идея. |
Логика довольно простая это упрощение грамматик языка.
Как ни крути все же HTML это формализованный язык программирования и как следствие должен следовать правилам не допускающим разночтения и толкования (те самые грамматики). И вот тут поднимается вопрос о том как должно быть сформулировано правило описывающее поведение алгоритма построения страницы когда у элемента встречается стилевое свойство filter отличное от none. Логично что правило "всегда" гораздо проще чем многостраничное описание фаз луны и расположения звезд на небе. По большей части это из за возможности filter задавать прозрачность элементам что без создания "контекста наложения" сильно усложняет ту самую формализованную логику работы языка программирования HTML, разработчики опять пошли по пути упрощения поэтому контекст наложения создается всегда. |
| Часовой пояс GMT +3, время: 17:12. |