CSS3 анимации нарушение фиксированного позиционирования при прокрутке страницы

У меня возникли проблемы с попыткой выяснить, почему chrome (что делает фиксированный заголовок полностью исчезает, Firefox держит его там, но позволяет абсолютно позиционированным элементам перетекать через фиксированный элемент, я предотвратил проблему с помощью непрозрачности:.99, но я все еще ломаю голову, как это что-то исправить.

http://www.rickpascua.cu.cc/newsite-snazzy/index.html

7
css css-animations css3 google-chrome

5 ответов

Я все еще не знаю, почему анимация CSS нарушает макет. В моем тестировании, с анимацией работает, имея overflow:hidden;z-index на заголовке заставлял его терять фиксированное позиционирование! Однако, у меня есть ответ.

для начала, удалить

overflow:hidden;
visibility:visible;
z-index:99;

из элемента заголовка фиксированной позиции <div id="header">.

однако с этими 3 свойствами удалены,<div id="slide-contain"/> будет все-таки пересекаются! Это происходит из-за неявного контекста стекирования layering, см. 7 слоев в CSS_absolute_and_fixed_positioning#The_third_dimension статьи.

излишнее перекрытие происходит, потому что position:relative установлен на <div id="slide-contain"/> (который является потомком элемента <div id="wrapper"/>), но есть нет z-index об этом элементе. Я понимаю, что относительное позиционирование было добавлено, потому что вы хотите абсолютно расположить некоторые дочерние элементы внутри.

на <div id="slide-contain"/> элемент находится на том же Z-плоскость, как и любой другой элемент без Z-индекса на странице, который включает фиксированный заголовок. Оба элемента находятся на Уровень 6-позиционированные потомки с уровнем стека, установленным как auto или (ноль), согласно связанной статье и штабелированию по умолчанию порядок, в котором элементы появляются на DOM, так что <div id="slide-contain"/> оказывается за `.

так z-index:1 требуется в заголовке, чтобы всегда отображать заголовок сверху. Это просто должно быть больше. чем 0, поэтому изменение z-index:99 to z-index:1

альтернативным решением было бы предоставить отрицательный z-index (и position:relative) на следующий брат <div id="wrapper"/>.

вы можете подумать, что добавление отрицательного z-index на <div id="slide-contain"/> было бы достаточно, но его нужно было бы дублировать предкам элемента, иначе <div id="slide-contain"/> будет отодвинут за его родителем.

2

установите следующий CSS для элемента disappear

-webkit-transform: translate3d(0, 0, 0);
transform        : translate3d(0, 0, 0);

на transform атрибут translated3d не существует. translate3d делает и должен разрешить фиксированное позиционирование с анимированными элементами на одной странице.

4

EDIT: пользователь @jacob указывает, что это неправильный подход, который может негативно повлиять на производительность. Любое свойство, которое заставляет аппаратное ускорение, сделает трюк, но вместо того, чтобы применять это правило глобально, попробуйте применить это правило только к элементам, которые ломаются.

просто столкнулся с аналогичной проблемой при объединении animate.css с фундаментом от zurb.

решение, которое я придумал на основе ответа 

* {
backface-visibility: hidden;
}

Это работал над моей проблемой (фиксированные элементы теряют заполнение/границы и другие гадости во время анимации)

3

Я считаю, что эта ошибка происходит потому, что анимация контейнера выгружается на GPU; однако фиксированное позиционирование выводит потомок из потока, поэтому он не выгружается вместе с контейнером. И тогда элемент фиксированного положения неправильно составлен. Добавление любого аппаратно-ускоренного свойства (ex translate3d) к фиксированному элементу появляется "исправить" проблему (я считаю, потому что он также выгружается на GPU, избегая проблемы во время композиция.)

Ex

<div class="container">
  <div class="fixed"></div>
</div>

.container {
  animation-duration: 0.8s;
  animation-name: some-animation;
}

.fixed {
  /* transform: translateX(-200%); */
  transform: translate3d(-200%, 0, 0);
  position: fixed;
  top: 10rem;
}
1
background: url(../assets/logo.png) center no-repeat,url(../assets/header2.jpg) bottom center;
height: 50px;
width: 100%;
border-bottom: 5px solid black;
position: fixed;
text-align: center;
z-index: 99;

попробуйте этот, он будет работать.

но есть также проблема с вашим внутренним html в заголовке div вы используете float div, поэтому вы также должны использовать clear class с ними, если вы хотите использовать overflow: hidden или auto.

0