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

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 ]

0 голосов
/ 28 июля 2016

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

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

0 голосов
/ 07 июня 2016

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

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

0 голосов
/ 02 сентября 2015

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

0 голосов
/ 03 апреля 2014

Попробуйте это решение . У меня это работает в 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

0 голосов
/ 07 сентября 2013

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

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

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

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

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

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
0 голосов
/ 18 декабря 2018

Что для меня исправило, так это задержка назначения 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; ничего не сделал для меня.

0 голосов
/ 16 июня 2014

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

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

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

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

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