Проблема с анимацией внутри фиксированного родителя в Safari Mobile - PullRequest
Новая
       8

Проблема с анимацией внутри фиксированного родителя в Safari Mobile

0 голосов
/ 28 сентября 2018

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

Все работает так, как ожидается в Chrome (69), Firefox (62) и Safari mobile 11* Проблема возникает только в более старых версиях Safari для мобильных устройств, что наблюдается в 10.3.3 на iPad.

Навигация проекта использует внутренние ссылки для перехода вверх и вниз.стр.Когда страница переходит на якорь, анимированное изображение обрезается (как в верхней половине или нижней половине отсутствует) или полностью исчезает, и отображается правильно только с новым событием прокрутки.Эта проблема повторяется каждый раз, когда используются внутренние ссылки.При обычной прокрутке вниз по странице все в порядке.

Я попытался заменить анимацию ключевого кадра на GSAP или добавить / удалить классы в JS для анимации, но, похоже, ничего не помогло.

ОБНОВЛЕНИЕ : Обходное решение в ответе ниже

Вот используемый код: 

.animation-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.animation-wrapper img {
  width: 100%;
  animation: pulse 8s ease-in-out infinite;  
}

@keyframes pulse {
  0% {
    transform: scaleX(0.95);
  }   
  50% {
    transform: scaleX(1.05);
  }    
  100% {
    transform: scaleX(0.95);
  }
}

body {
  height: 4000px;
  background-color: black;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}

ul {
  display: flex;
  justify-content: space-around;
}

li > a {
  color: white;
}

.anchor {
  position: absolute;
  top: 0;
}

section {
  position: relative;
  height: 1000px;
}
<nav>
  <ul>
    <li class="item"><a href="#home">HOME</a></li>
    <li class="item"><a href="#projects">PROJECTS</a></li>
    <li class="item"><a href="#about">ABOUT</a></li>
    <li class="item"><a href="#contact">CONTACT</a></li>
  </ul>
</nav>

<div class="animation-wrapper">
  <img src="img1.jpg" alt="">
</div>

<section>
  <a id="home" class="anchor"></a>
</section>

<section>
  <a id="projects" class="anchor"></a>
</section>

<section>
  <a id="about" class="anchor"></a>
</section>

<section>
  <a id="contact" class="anchor"></a>
</section>

Эта проблема звучит знакомо?Кто-нибудь знает, что вызывает такое поведение, и что я мог бы сделать в качестве обходного пути?Это похоже на ошибку, которая была исправлена ​​в более новых версиях, но я все же хотел бы, чтобы этот проект работал и в более старых Safari.Любое понимание очень ценится.

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Я нашел обходное решение для этой проблемы.

Хотя я не до конца понимаю механизм создания слоев и перерисовок, я пришел к выводу, что Safari 10 неправильно перерисовывает графический элемент, анимированный с помощью графического процессора, когдавнутри контейнера с фиксированной позицией и ТОЛЬКО при использовании механизма прыжка с прокруткой, такого как scrollTo () или внутренних ссылок.

По принудительное перерисовывание фиксированного контейнера после каждого прыжка с прокруткой, анимированное изображениеотображается правильно без каких-либо отсечения.Для этого я попытался переключить отображение на none / block, но он каждый раз перезапускал анимацию.Я обнаружил, что переключение видимости в фиксированном контейнере позволяет дочернему изображению правильно отображаться без перезапуска анимации.

CSS 

.invisible {
    visibility: hidden;
}

JS 

document.querySelectorAll('.links).forEach(el => el.addEventListener('click', function () {
    document.querySelector('.animation-wrapper').classList.add('invisible');
    setTimeout(function () {
        document.querySelector('.animation-wrapper').classList.remove('invisible');
    }, 1);
}));
0 голосов
/ 28 сентября 2018

Попробуйте приведенный ниже рабочий фрагмент в своем проекте и посмотрите, существует ли проблема с использованием этого метода, надеюсь, это поможет:)

Примечание: не нужно использовать тег привязки с position: absolute для получения результата, id можно установить в секцию. 

.animation-wrapper {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.animation-wrapper img {
  width: 100%;
  height: 100%;
  animation: pulse 8s ease-in-out infinite;  
}

@keyframes pulse {
  0% {
    transform: scaleX(0.95);
  }   
  50% {
    transform: scaleX(1.05);
  }    
  100% {
    transform: scaleX(0.95);
  }
}

body {
  height: 4000px;
  background-color: black;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}

ul {
  display: flex;
  justify-content: space-around;
}

li > a {
  color: white;
}

section {
  position: relative;
  height: 1000px;
}
<nav>
  <ul>
    <li class="item"><a href="#home">HOME</a></li>
    <li class="item"><a href="#projects">PROJECTS</a></li>
    <li class="item"><a href="#about">ABOUT</a></li>
    <li class="item"><a href="#contact">CONTACT</a></li>
  </ul>
</nav>

<div class="animation-wrapper">
  <img src="https://via.placeholder.com/300x300">
</div>

<section id="home">
</section>

<section id="projects">
</section>

<section id="about">
</section>

<section id="contact">
</section>
...