CSS-фильтр по родительским позициям ломает дочернее позиционирование - PullRequest
Новая
       70

CSS-фильтр по родительским позициям ломает дочернее позиционирование

0 голосов
/ 23 октября 2018

Я сейчас работаю над сайтом и столкнулся с этим странным поведением.Я не уверен, является ли это ошибкой или как с ней бороться, поэтому я прошу вас, ребята, помочь.и когда вы прокручиваете вниз, он становится меньше и остается в верхней части страницы.Вот рабочий пример с ожидаемым поведением, из которого я удалил весь ненужный код, чтобы сделать его минимальным: 

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
	
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>	
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

Далее следует точно такой же фрагмент, но с одним дополнением: я применил фильтр, который, насколько я понимаю, чистокосметика: filter: brightness(1.3);.

Как вы можете видеть ниже, когда вы прокручиваете "анимацию" на полпути, заголовок просто исчезает.Когда вы проверяете элемент, он все еще имеет все свои свойства, но каким-то образом он исчез.Это то же самое в Firefox и Chrome, и я понятия не имею, почему.Я был бы очень признателен, если бы кто-то мог опубликовать рабочий фрагмент с примененным фильтром и объяснить, почему он не работал раньше. 

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
	
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    filter: brightness(1.3);        /*<<<<<<<<<<<<<<<<*/
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>	
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

1 Ответ

0 голосов
/ 23 октября 2018

Если мы ссылаемся на спецификацию , мы можем прочитать:

Значение, отличное от none, для свойства фильтра приводит к созданию содержащего блока для абсолютногои фиксированное положение потомки , если только элемент, к которому он применяется, не является корневым элементом документа в текущем контексте просмотра.Список функций применяется в указанном порядке.

Это означает, что ваш элемент position:fixed будет расположен относительно фильтруемого контейнера, а не области просмотра.Другими словами, он все еще исправлен, но внутри своего нового блока, содержащего (отфильтрованный контейнер)

Вот упрощенная версия, иллюстрирующая проблему: 

.container {
  display: inline-block;
  width: 200px;
  height: 200vh;
  border: 1px solid;
}

.container>div {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
<div class="container">
  <div>I am fixed on scroll</div>
</div>

<div class="container" style="filter:grayscale(1);">
  <div>I move with the scroll</div>
</div>

Чтобы устранить проблему, попробуйте переместить фильтр на фиксированный элемент вместо его контейнера: 

.container {
  display: inline-block;
  width: 200px;
  height: 200vh;
  border: 1px solid;
}

.container>div {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
  filter: grayscale(1);
}
<div class="container">
  <div>I am fixed on scroll</div>
</div>

Он ведет себя точно так же, как преобразование: 'transform3d' не работает с положением: фиксированные дочерние элементы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...