Это сайт 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". Вы увидите, как взорвутся пушки, весь фон аксессуаров/кошельков белеет. Может кто-то, пожалуйста, излучите меня с некоторым пониманием, почему это происходит?
Я добавил -webkit-backface-visiblity, и это в основном помогло, но у меня все еще было начальное мерцание после перезагрузки страницы. Когда я добавил -webkit-perspective: 1000, не было никакого мерцания.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Попробуйте это, и, надеюсь, это поможет:
#game {
-webkit-backface-visibility: hidden;
}
body {-webkit-transform:translate3d(0,0,0);}
Фактический ответ для моего дела здесь. Кто-то был близок с: -webkit-backface-visibility: hidden; Но реальный ответ: -webkit-backface-visibility: hidden; необходимо добавить в div parent.
У меня возникла проблема с "мерцающим" переходом CSS. Анимация, о которой идет речь, - это меню, скользящее с экрана, и только когда анимация закончилась, все меню мигало/мерцало.
Как выяснилось, это было вызвано фактической функцией iOS, "tap highlight" , которая по какой-то причине начиналась после завершена анимация CSS (т.е. путь после фактического нажатия) и выделено все меню, а не только элемент, который был использован. Я "исправил" проблему, полностью отключив подсветку tap-highlight, как описано здесь:
-webkit-tap-highlight-color: rgba(0,0,0,0);
Майкл ответ -webkit-backface-visibility: hidden; работал, когда мы сталкивались с этой проблемой. У нас translateZ(0px) на нашем теге <body>, чтобы предотвратить ошибку границ iOS 3.1.3 и более ранней IFRAME, и это вызвало мерцание анимаций. Добавляя -webkit-backface-visibility: hidden; к каждому элементу, который мы анимировали, зафиксировали мерцание! Спасатель жизни.
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
Я заметил, что когда у меня было состояние зависания на div, страница будет мерцать, даже если бы у меня не было никаких css или js. возможно, это помогает кому-то еще.
Если кто-либо обнаружит, что обратная видимость не работает, вы можете посмотреть свойства уже на своем анимированном элементе. Для нас мы обнаружили, что overflow-y: scroll на позиционированном элементе absolute или fixed вызывал значительное мерцание на iOS.
Просто удаление overflow-y: scroll исправлено.
Даже если у меня были -webkit-transform-style: preserve-3d; и -webkit-backface-visibility: hidden, мерцание все еще происходило.
В моем случае причиной было z-index. Увеличение его на активном элементе помогло.
Здесь новое решение. Я устанавливал фоновое изображение с помощью 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"); }
Попробуйте это решение. Он работает для меня в Phonegap + jQM 1.4.0:
Измените это <meta name="viewport" content="width=device-width, initial-scale=1">
Вместо этого:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Подробнее здесь: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in
Я потратил много времени на то, чтобы выяснить эту проблему для установки Ember Animated Outlets, Phonegap и iOS.
Хотя это было просто, мне пришлось добавить фон для каждого элемента верхнего уровня, который был включен в анимацию css. Другими словами, убедитесь, что нигде в ваших представлениях нет элемента, который не имеет фона.
Моя настройка была для каждого шаблона, и все три элемента имели назначенный им цвет фона:
<header></header>
<body class="content"></body>
<footer></footer>
Вместо применения перехода к "все" просто укажите тот, который вам действительно нужен. Он удалил мерцание на моем случае.
Я попробовал все вышеперечисленное и все еще имел серьезные проблески в Firefox и Chrome. Я исправил это или, по крайней мере, значительно уменьшил его до приемлемой проблемы, удалив трансформацию box-shadow, которая вызывала много репретов во время анимации. Я последовал за этим и модифицировал для своих нужд:
для меня, мерцающая проблема сафари решена путем удаления will-change: transform; анимированного элемента.
также я мог бы решить эту проблему, добавив overflow: hidden; к родительскому элементу, но при этом все элементы с transform: translateZ() оказались неэффективными
Мне пришлось использовать фактическое значение (а не 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)" для принудительного рендеринга оборудования, поэтому теперь они могут игнорировать эти поддельные значения.
= > Использование фактического значения может привести к тому, что вещи будут "придерживаться".
В любом случае, работал на меня.
Я испытывал мерцание при выполнении слайд-перехода при использовании веб-браузера Android по умолчанию.
Я использовал следующий переход CSS:
-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);
Ни один из обходных путей, упомянутых в этой теме, не помог решить проблему. Наконец я нашел решение. Источником мерцания является ключевое слово all, которое означает выполнение всех возможных переходов. Я изменил его, чтобы выполнить только преобразование, и проблема была решена:
-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
Для меня исправлено было задержать назначение 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; ничего не сделал для меня
Так что я нашел решение этой проблемы, когда никто другой не работал должным образом.
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 может быть полезна, если это решение не работает вне шлюза.