jQuery FadeIn e FadeOut causam cintilação?
Eu originalmente escrevi esta pergunta sobre um plugin jQuery. Eu já tentei outro código usando apenas jQuery:
$('#action-alerts .rotate:gt(0)').hide();
setInterval(function(){
$('#action-alerts .rotate:first-child').fadeOut(600)
.next('.rotate').delay(600).fadeIn(600)
.end().appendTo('#action-alerts');},
3000);
Este código ainda tem o problema de cintilação no iOS. Como resolvo esse problema?
Abaixo está minha pergunta original:
Eu estou usando um jQuery Plugin chamadoRotator das citações. Funciona muito bem no navegador, no entanto, no iOS (v6), quando a transição acontece, ela pisca. É muito chato e não sei como resolver os problemas de cintilação. Eu li sobre-webkit-backface-visibility
mas não acredito que seja esse o caso. Primeiro eu já tinha esse código na minha folha de estilo:
body {
-webkit-backface-visibility: hidden;
}
Segundo, isso não se aplica apenas a CSS 3 Transitions? (Ou meu entendimento é incorreto?)
O que devo tentar resolver este problema?
HTML
<div id="action-alerts">
<ul>
<li>
<div class="quote-holder">
<div class="grid_10">
<h3 class="action-box-red"><span class="alert-icon">Text</span></h3>
</div>
<div class="grid_2">
<a target="_blank" href="#" class="default_button xlarge textcenter red">Read the <br> Report</a>
</div>
</div>
</li>
<li>
<div class="quote-holder">
<div class="grid_10">
<h3 class="action-box-red"><span class="alert-icon">Text</span></h3>
</div>
<div class="grid_2">
<a target="_blank" href="#" class="default_button xlarge textcenter red">Take <br> Action</a>
</div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$('#action-alerts').quote_rotator({
rotation_speed: 9000
});
});
Notas: Eu tenho mais HTML do que postado aqui. Isso é um trecho. Eu estou usando o jQuery 1.8.3. Eu não me importo de mudar para outro plugin, se ele funciona (o que significa que cria uma transição de desvanecimento simples entre<li>
elementos.) Eu tentei usarQuovolver antes de citar Rotator mas eu tinhaproblemas e não conseguiu fazê-lo funcionar.