1. дома
  2. Вопрос и ответ
  3. iPhone WebKit CSS анимация вызывает мерцание

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

2010-06-01 7 views
75

Это сайт iphone: http://www.thevisionairegroup.com/projects/accessorizer/site/iPhone WebKit CSS анимация вызывает мерцание

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

'-webkit-transition': 'none' 

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

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

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

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

источник

2010-06-01 Jake Chapa

ответ

39

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

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

источник

2010-07-28 01:42:26 donohoe

+1

Это отлично работает в Safari по умолчанию, но не работает в автономном режиме. У тебя есть идеи? – cYrus

122

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

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

источник

2010-08-11 18:49:44

+18

Что за волшебство за 1000? Может ли любое другое значение (> 0) работать? – cYrus

+0

ПРИМЕЧАНИЕ: это делает анимацию невосприимчивой к событиям мыши на окнах chrome v19: на практике это добавляет, мерцания нет, но анимация не всегда начинается (при наведении мыши или что-то еще) – skyline26

+0

Исправлена ​​проблема: простой анимационный div был popping 1px слева в начале анимации в Chrome 25, но было хорошо в Safari 6.0.2 и Canary 27. Рад, что это работает, хотелось бы понять, почему. – joemaller

5

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

источник

2010-09-11 03:38:36

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

источник

2010-10-14 14:33:23

+0

Это сделало это для меня .. однако мне пришлось применить его на элементе '# wrapper', так как наложение на тело испортило бы макет , – adamJLev

+0

Если кто-то хочет увидеть обратную сторону «-webkit-backface-visibility: hidden;» не работает, но этот совершенен. Благодаря! – Nachtgold

+0

безупречный. '-webkit-backface-visibility: hidden;' вызвало размытие любых масштабных преобразований. 'body {-webkit-transform: translate3d (0,0,0);}' работал с удовольствием. – Liam

12

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

источник

2012-07-02 11:21:06

+0

Мне действительно нужно было добавить '-webkit-backface-visibility: hidden;' родительскому div, анимированный div и детям анимированного div. Как только я это сделал, он работал безупречно. – mattstuehler

+0

Отлично, это, в конце концов, сработало! Благодаря! – joern

+2

Я думаю, что исправил мое мерцание, добавив его к родительскому. Что это на самом деле? – chovy

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

я заметил, когда я имел состояние парения на DIV страница будет мерцать, даже если у меня не было каких-либо CSS или JS прилагается к нему. возможно, это помогает кому-то другому.

источник

2013-04-08 23:05:08 Jesse

+0

для меня это сделало трюк. Остальные были важны только тогда, когда были сделаны переходы. – Nadav

11

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

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

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

источник

2013-04-29 15:07:38 fresskoma

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"); }

источник

2013-09-07 17:59:51 mattwad

0

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

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

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

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

источник

2014-06-16 18:24:38 kenorvick

3

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

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

источник

2014-07-08 01:53:12 KendallB

+0

Удаление 'overflow-y: scroll' помогло мне случай. Большое спасибо! – YemSalat

+0

Возможно, это тоже мой случай, но я не могу удалить overflow-y nore абсолютный positon для этого элемента. Любая идея? –

0

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

источник

2015-09-02 08:54:17

1

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

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

источник

2015-11-17 14:05:14 Morpheus

0

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

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

источник

2016-06-07 12:11:29 d1ch0t0my

0

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

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

источник

2016-07-28 12:12:30

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>

From what I've read, мерцание вызвано переключением браузера между аппаратным и программным обеспечением рендеринг. И я думаю, что разработчики браузеров знают о даге «translate3d (0,0,0)» для принудительного рендеринга оборудования, поэтому теперь они могут игнорировать эти поддельные значения.

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

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

источник

2017-06-24 00:21:16 bob

0

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

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

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

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

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

источник

2018-01-16 12:52:35 Jusid

Смежные вопросы

 Смежные вопросы