jQuery FadeIn y FadeOut causan parpadeo?
Originalmente escribí esta pregunta sobre un complemento de jQuery. Desde entonces intenté otro código usando solo 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 todavía tiene el problema de parpadeo en iOS. ¿Cómo resuelvo este problema?
A continuación se muestra mi pregunta original:
Estoy usando un plugin jQuery llamadoRotador de cotización. Funciona muy bien en el navegador, sin embargo, en iOS (v6), cuando la transición ocurre, parpadea. Es bastante molesto y no estoy seguro de cómo resolver los problemas de parpadeo. He leído sobre-webkit-backface-visibility
Pero no creo que este sea el caso. Primero ya tenía este código en mi hoja de estilos:
body {
-webkit-backface-visibility: hidden;
}
Segundo, ¿esto no se aplica a las transiciones de CSS 3? (¿O es mi entendimiento incorrecto?)
¿Qué debo tratar de 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: Tengo más HTML que publicado aquí. Este es un fragmento. Estoy usando jQuery 1.8.3. No me importa cambiar a otro complemento si funciona (lo que significa que crea una transición de transición entre<li>
elementos.) He intentado utilizarQuovolver Antes de la cita Rotator pero teníacuestiones y no pudo hacerlo funcionar.