Использование `filter: яркость ()` с псевдоэлементами разрушает абсолютное позиционирование?
У меня есть псевдокласс на теге <label>, чтобы показать проверку, когда опция была проверена. Он проделывал все эти сумасшедшие вещи с позиционированием, бросал все псевдоэлементы в верхний угол и даже показывал два одинаковых элемента ::after при наведении курсора.
Я наконец понял, что у меня есть filter: brightness(.9) на :hover, но нет filter: brightness на базовом <label> CSS. Как только я добавил filter: brightness(1) к базовому элементу, проблема исчезла.
Вот рабочий пример. Сначала наведите указатель мыши на флажки в правом верхнем углу и синие кнопки, чтобы увидеть проблему. Затем раскомментируйте строку filter: brightness(1), чтобы увидеть исправление. Я сделал его немного некрасивым, чтобы проблема была видна.
Но теперь я остаюсь чесать голову. Что происходило? Похоже, что из-за того, что filter не был включен, CSS забыл, какой элемент был родительским, и просто сослался на последний нестатически позиционированный элемент. Почему это могло произойти? А есть еще такие случаи?
Также обратите внимание, что фильтр (отличный от none) создает новый контекст наложения и IIRC, который включает в себя его относительный (поэтому добавление filter к метке работает)
Спасибо! Голосует за вас обоих. Есть ли причина, по которой он создает два при наведении курсора на элемент?
@BennyHinrichs, что ты имеешь в виду, он создает два? вы имеете в виду, когда вы наводите курсор на правую верхнюю галочку? Он не создает 2, когда вы наводите курсор, он применяет фильтр, который, в свою очередь, изменяет элемент на содержащий блок (в основном, положение относительно), как только это происходит, галочка возвращается в правильное положение на кнопке, но теперь это не дольше зависает и возвращается в верхний правый угол. Это повторяется, пока вы зависаете, и поэтому он мигает
Хорошо, спасибо! Я на самом деле понял это за 10 секунд до того, как вы ответили, и собирался отредактировать свой комментарий, но вы меня опередили
Я оставил ответ на случай, если эти комментарии потеряются
Ответы 1
Первоначальная проблема заключается в том, что ваш label отсутствует.
position: relative;
Чтобы стрелка была вверху, поскольку она абсолютная, не содержится в кнопке.
Когда вы добавляете к нему фильтр, элемент меняется на содержащий блок (это то, что делает фильтр), поэтому он имеет эффект position: relative, и поэтому все выглядит нормально.
В вашей скрипке, когда вы наводите курсор, он применяет фильтр, который, в свою очередь, изменяет элемент на содержащий блок (в основном относительное положение), как только это происходит, галочка возвращается в правильное положение на кнопке, но теперь она больше не зависает и возвращается в верхний правый угол. Это повторяется, пока вы зависаете, и поэтому он мигает
На вашей этикетке отсутствует
position: relative, поэтому, конечно же, галочка будет вверху