IPhone WebKit CSS анимации вызывают мерцание

Это сайт iphone: http://www.thevisionairegroup.com/projects/accessorizer/site/

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

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

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

Самая большая проблема заключается в том, когда вы нажимаете "Match items", а затем "Play again". Вы увидите, как взорвутся пушки, весь фон аксессуаров/кошельков белеет. Может кто-то, пожалуйста, излучите меня с некоторым пониманием, почему это происходит?

ОТВЕТЫ

Ответ 1

Я добавил -webkit-backface-visiblity, и это в основном помогло, но у меня все еще было начальное мерцание после перезагрузки страницы. Когда я добавил -webkit-perspective: 1000, не было никакого мерцания.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Ответ 2

Попробуйте это, и, надеюсь, это поможет:

#game {
  -webkit-backface-visibility: hidden;
}

Ответ 3

body {-webkit-transform:translate3d(0,0,0);}

Ответ 4

Фактический ответ для моего дела здесь. Кто-то был близок с: -webkit-backface-visibility: hidden; Но реальный ответ: -webkit-backface-visibility: hidden; необходимо добавить в div parent.

Ответ 5

У меня возникла проблема с "мерцающим" переходом CSS. Анимация, о которой идет речь, - это меню, скользящее с экрана, и только когда анимация закончилась, все меню мигало/мерцало.

Как выяснилось, это было вызвано фактической функцией iOS, "tap highlight" , которая по какой-то причине начиналась после завершена анимация CSS (т.е. путь после фактического нажатия) и выделено все меню, а не только элемент, который был использован. Я "исправил" проблему, полностью отключив подсветку tap-highlight, как описано здесь:

-webkit-tap-highlight-color: rgba(0,0,0,0);

Ответ 6

Майкл ответ -webkit-backface-visibility: hidden; работал, когда мы сталкивались с этой проблемой. У нас translateZ(0px) на нашем теге <body>, чтобы предотвратить ошибку границ iOS 3.1.3 и более ранней IFRAME, и это вызвало мерцание анимаций. Добавляя -webkit-backface-visibility: hidden; к каждому элементу, который мы анимировали, зафиксировали мерцание! Спасатель жизни.

Ответ 7

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

Я заметил, что когда у меня было состояние зависания на div, страница будет мерцать, даже если бы у меня не было никаких css или js. возможно, это помогает кому-то еще.

Ответ 8

Если кто-либо обнаружит, что обратная видимость не работает, вы можете посмотреть свойства уже на своем анимированном элементе. Для нас мы обнаружили, что overflow-y: scroll на позиционированном элементе absolute или fixed вызывал значительное мерцание на iOS.

Просто удаление overflow-y: scroll исправлено.

Ответ 9

Даже если у меня были -webkit-transform-style: preserve-3d; и -webkit-backface-visibility: hidden, мерцание все еще происходило.

В моем случае причиной было z-index. Увеличение его на активном элементе помогло.

Ответ 10

Здесь новое решение. Я устанавливал фоновое изображение с помощью jQuery, и ни один из трюков с 3D-рендерингом не работал. Поэтому я попытался использовать классы для определения свойств. Вуаля! Гладкое, как масло.

Это вызывает мерцание:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

Вместо этого выполните:

$('#banner').attr('class', '.slide-1');

с определенными классами:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }

Ответ 12

Я потратил много времени на то, чтобы выяснить эту проблему для установки Ember Animated Outlets, Phonegap и iOS.

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

Моя настройка была для каждого шаблона, и все три элемента имели назначенный им цвет фона:

<header></header> <body class="content"></body> <footer></footer>

Ответ 13

Вместо применения перехода к "все" просто укажите тот, который вам действительно нужен. Он удалил мерцание на моем случае.

Ответ 14

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

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Ответ 15

для меня, мерцающая проблема сафари решена путем удаления will-change: transform; анимированного элемента.

также я мог бы решить эту проблему, добавив overflow: hidden; к родительскому элементу, но при этом все элементы с transform: translateZ() оказались неэффективными

Ответ 16

Мне пришлось использовать фактическое значение (а не 0):

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

Пример:

<div class="foo no-flick"></div>

Из того, что я прочитал, мерцание вызвано переходом браузера между аппаратным и программным рендерингом. И я думаю, что разработчики браузеров знают о даге "translate3d (0,0,0)" для принудительного рендеринга оборудования, поэтому теперь они могут игнорировать эти поддельные значения.

= > Использование фактического значения может привести к тому, что вещи будут "придерживаться".

В любом случае, работал на меня.

Ответ 17

Я испытывал мерцание при выполнении слайд-перехода при использовании веб-браузера Android по умолчанию.

Я использовал следующий переход CSS:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

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

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);

Ответ 18

Для меня исправлено было задержать назначение CSS-правила transform-translate. Что-то вроде этого:

HTML:

<div class="animate-this loading"></div>

CSS:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

... Потому что -webkit-backface-visibility: hidden; ничего не сделал для меня

Ответ 19

Так что я нашел решение этой проблемы, когда никто другой не работал должным образом.

CSS:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML:

<div class="ios-animation-fixer"></div>

Затем установите z-index для вашего анимированного элемента равным> 1. Это каким-то образом обманывает устройства iOS для рендеринга анимации по-другому и избегает мерцания в моем сценарии. Корректировка значений z-index может быть полезна, если это решение не работает вне шлюза.