CSS-анимация iPhone WebKit вызывает мерцание

83

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

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

'-webkit-transition': 'none'

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

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

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

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

iphone css animation webkit flicker Джейк Чапа
источник

Ответы:

126

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

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Уэс Бейкер
источник
21
В чем магия 1000? Может ли работать любое другое значение (> 0)?
cYrus
ПРИМЕЧАНИЕ: это делает анимацию невосприимчивой к событиям мыши в Windows Chrome v19: при добавлении этого на практике мерцания нет, но анимация не всегда запускается (при наведении курсора мыши или что-то еще)
skyline26
1
ПРИМЕЧАНИЕ: добавление обратной видимости изменит цветопередачу. Вот пример включения и выключения видимости задней стороны
Тамик Созиев
3
У меня была проблема с мерцанием текста при попытке перенести элементы ссылки. Изменение видимости задней поверхности изменило сглаживание, сделав шрифт действительно тонким. Исправлено с помощью -webkit-font-smoothing: subpixel-antialiased;
Дэн
1
@cYrus, я думаю, мы никогда не узнаем
Денни
39

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

#game {
  -webkit-backface-visibility: hidden;
}
Donohoe
источник
2
Это отлично работает в Safari по умолчанию, но не работает в автономном режиме. Есть ли у вас какие-либо идеи?
cYrus
18 
body {-webkit-transform:translate3d(0,0,0);}
Брайан Д'Астоус
источник
Это сделало это для меня ... однако мне пришлось применить его к #wrapperэлементу, так как применение к телу испортит макет.
adamJLev
Если кто-то хочет увидеть обратную сторону «-webkit-backface-visibility: hidden;» не работает, но этот идеален. Благодаря!
Nachtgold
идеальный. -webkit-backface-visibility: hidden;приводит к размытости любых масштабных преобразований. body {-webkit-transform:translate3d(0,0,0);}работал угощение.
Лиам
Я пытаюсь, но у меня не получается. Вот фрагмент кода: codeply.com/go/g7Zp98paz5
Fran_gg7
1
Это сработало для меня. В моем случае это scale(1)вызвало мерцание. большое спасибо
jansesun
12

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

Йохан Де Силва
источник
Мне действительно нужно было добавить -webkit-backface-visibility: hidden;к родительскому div анимированный div И дочерние элементы анимированного div. Как только я это сделал, все заработало безупречно.
mattstuehler
2
Я думаю, что это тоже устранило мое мерцание, добавив его к родительскому элементу. Что он на самом деле делает?
chovy
Однако добавление его к родительскому элементу отменяет "фиксированное" положение дочерних элементов :(
Джеймс
11

У меня также была проблема с «мерцающим» переходом CSS. Рассматриваемая анимация была меню, скользящим за пределами экрана, и как только анимация закончилась, все меню мигало / мерцало.

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

-webkit-tap-highlight-color: rgba(0,0,0,0);
Fresskoma
источник
5

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

Роб Баррека
источник
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

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

Джесси
источник
для меня это помогло. другие были актуальны только тогда, когда имел место переходный период.
Надав
3

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

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

KendallB
источник
Удаление overflow-y: scrollпомогло моему делу. Спасибо огромное!
YemSalat
Наверное, это и мой случай. но я не могу удалить переполнение или абсолютное положение для этого элемента. Есть идеи?
Коби Коэн
1

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

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

Морфеус
источник
0

Вот новое решение. Я устанавливал фоновое изображение с помощью 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"); }
Mattwad
источник
0

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

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

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

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

Kenorvick
источник
0

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

Сильвестр Люсия
источник
0

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

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

d1ch0t0my
источник
0

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

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

Мохсен.Хакбиз
источник
0

Мне пришлось использовать фактическое значение (а не 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)" для принудительного аппаратного рендеринга - поэтому теперь они могут игнорировать эти поддельные значения.

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

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

боб
источник
0

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

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

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

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

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
Джусид
источник
0

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

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;не делал ничего для меня.

Вудро Шигеру
источник
0

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

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 может быть полезна, если это решение не работает сразу.

Колин
источник
0

ОБНОВЛЕНИЕ 2019

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

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

Работал у меня на Сафарае

Фристайл09
источник