Анімація CSS iPhone WebKit викликає мерехтіння

83

Це сайт iphone: http://www.thevisionairegroup.com/projects/accessorizer/site/

Після натискання кнопки "грати зараз" ви потрапите в гру. Пістолети будуть прокручуватися. Ви можете прокручувати гаманець та аксесуари вгору та вниз. Ви бачите, що коли ви відпускаєте, вони закріплюються на своєму місці. Подібно до того, як відбувається це замикання, виникає мерехтіння. Єдиною анімацією, яку я використовую, є:

'-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
ПРИМІТКА: це робить анімацію невідповідною до подій миші у вікні chrome v19: на практиці, додаючи це, мерехтіння відсутнє, але анімація не завжди починається (при наведенні курсору миші чи будь-якому
— іншому
1
ПРИМІТКА: додавання видимості задньої поверхні змінить візуалізацію кольорів. Ось приклад з увімкненням та вимкненням видимості на задньому плані
— Тамік Созієв
3
У мене виникла проблема з мерехтінням тексту при спробі переходу елементів посилання. Зміна видимості задньої поверхні змінило згладжування, зробивши шрифт справді тонким. Виправлено за допомогою -webkit-font-zгладжування: 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);
— фресскома
джерело
5

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

— Роб Баррека
джерело
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

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

— Джессі
джерело
для мене той зробив трюк. інші були актуальними лише тоді, коли існували переходи.
— Nadav
3

Якщо хтось виявить, що видимість задньої поверхні не працює, ви можете переглянути властивості, що вже є в вашому анімованому елементі. Для нас ми виявили, що overflow-y: scrollнаabsolute абоfixed розташований елемент завдавали великі миготіти на прошивці.

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

— КендаллB
джерело
Видалення 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>

— кенорвік
джерело
0

Замість того, щоб застосовувати перехід до "всіх", просто вкажіть той, який вам справді потрібен. Це прибрало мерехтіння на моєму випадку.

— Сільвестр Люсія
джерело
0

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

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>

З прочитаного , мерехтіння спричинене перемиканням браузера між апаратним та програмним забезпеченням. І я думаю, що виробники браузерів знають, що olde "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-індексу може бути корисним, якщо це рішення не допоможе.

— Колін
джерело
0

ОНОВИТИ 2019

Ви можете увімкнути мерехтіння, просто додавши ці правила до свого елемента, для якого використовується перехід.

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

Працював у мене на Сафараї

— Фрістайл09
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.