Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2023, 13:02
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Загадочное явление с 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>


Каков эффект!
Я только цвета инвертировал. А куда все поползло?
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2023, 21:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Вопрос закрыт. Объяснение простое - так устроен этот мир!
Все по спеке. При применении filter все дочерние элементы, имеющие абсолютное или фиксированное позиционирование, выносятся в некий отдельный блок, и считаются расположенными в нем.
Так, оказывается легче производителем браузеров. Иначе у них проблемы с эффективностью рендеринга, аппаратным ускорением, и вообще куча тонкостей, которых нам не понять.
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2023, 08:03
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

>... которых нам не понять.

Ну почему же концепция "контекст наложения" вполне логичный и понятный механизм рендеринга страницы когда сам рендеринг разбивается на отдельные независимые части и по этому CSS свойства способные вызвать перерисовку всей страницы вместо этого создают отдельный "контекст наложения" и перерисовывают только его.
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2023, 08:57
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Может там с точки зрения реализации что то и логично, но в том, что при изменении только цвета изменяется положение в пространстве, я никакой логики не вижу.
Это же начисто убивает смысл такой верстки. Если не могут иначе, то проще сказать сразу - не применяйте фильтры к элементам, у которых есть дочерние абсолютные, т.к. мы снесем эти дочерние и расположим их не там, где вам нужно, а там, где нам удобнее.
Опять же это контекст не должен нарушать верстку. Если дочерние были внутри элемента, так они там должны и остаться по расположению.

Последний раз редактировалось voraa, 06.02.2023 в 09:03.
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2023, 10:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Ну по сути оно ведёт себя также, как если бы вы ему добавили
position: relative;
или transform
или backdrop-filter
...

Надо просто помнить о таких вещах. Вообще пихать absolute в static - не очень хорошая идея.
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 06.02.2023, 10:28
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Логика довольно простая это упрощение грамматик языка.

Как ни крути все же HTML это формализованный язык программирования и как следствие должен следовать правилам не допускающим разночтения и толкования (те самые грамматики).
И вот тут поднимается вопрос о том как должно быть сформулировано правило описывающее поведение алгоритма построения страницы когда у элемента встречается стилевое свойство filter отличное от none.
Логично что правило "всегда" гораздо проще чем многостраничное описание фаз луны и расположения звезд на небе.

По большей части это из за возможности filter задавать прозрачность элементам что без создания "контекста наложения" сильно усложняет ту самую формализованную логику работы языка программирования HTML, разработчики опять пошли по пути упрощения поэтому контекст наложения создается всегда.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Встраиваем шрифт внутрь css sovsem-nub (X)HTML/CSS 0 26.09.2015 20:17
возврат на прежний css faig92 Элементы интерфейса 0 28.03.2015 18:31
Фильтры в гриде AlexTIX ExtJS 4 15.01.2014 17:25
JQuery CSS анализатор javascript jQuery 2 15.08.2010 21:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58