CSS-анимации iPhone WebKit вызывают мерцание - PullRequest
Новая
       30

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

78 голосов
/ 01 июня 2010

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

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

'-webkit-transition': 'none'

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

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

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

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

Ответы [ 18 ]

125 голосов
/ 11 августа 2010

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

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
38 голосов
/ 28 июля 2010

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

#game {
  -webkit-backface-visibility: hidden;
}
17 голосов
/ 14 октября 2010 
body {-webkit-transform:translate3d(0,0,0);}
12 голосов
/ 02 июля 2012

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

11 голосов
/ 29 апреля 2013

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

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

-webkit-tap-highlight-color: rgba(0,0,0,0);
5 голосов
/ 11 сентября 2010

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

3 голосов
/ 08 июля 2014

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

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

3 голосов
/ 09 апреля 2013 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

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

1 голос
/ 17 ноября 2015

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

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

0 голосов
/ 24 июня 2017

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

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

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

Страница:
...