jQuery animate() Buggy dans Firefox

Question

J'ai écrit une application de minuterie simple qui change la couleur de l'arrière-plan au fur et à mesure que la minuterie progresse, donnant une indication visuelle de votre manque de temps. Cela semble fonctionner correctement dans Chrome, mais rencontre de sérieux problèmes dans Firefox. Au lieu de glisser proprement à travers la page, le fond scintille et saute jusqu'à ce qu'il se rapproche de la fin, à quel point il se comporte comme prévu.

EDIT: Le problème est en fait apparu comme un problème avec le CSS. Le JavaScript/jQuery est correct.

La page: andrewcombs13.com/myStuff/timer/

HTML pertinent:

<div id="Slider"></div> 

CSS pertinente:

#Slider { 
position: fixed; 
top: 0px; bottom: 0px; 
left: 0px; right: 100%; 
z-index: fixed; 
background-color: red; 
} 

JavaScript pertinent:

var sliderPercent = (window.time * 100/window.timeSet); 
if(sliderPercent > (window.lastSliderPercent + 75)) { 
    $("#Slider").animate({right: sliderPercent.toString().concat("%")}, 750, "easeInOutCubic"); 
} else { 
    $("#Slider").animate({right: sliderPercent.toString().concat("%")}, window.tickLength - 10, "linear"); 
} 
window.lastSliderPercent = sliderPercent; 

Où fenêtre. temps est le temps restant sur la minuterie, window.timeSet est la valeur initiale du timer, window.tickLength est la fréquence à laquelle la fonction de progression du timer est appelée, et window.lastSliderPercent est utilisé uniquement ici.

source complet se trouve ici:
HTML: view-source: andrewcombs13.com/myStuff/timer/
CSS: andrewcombs13.com/myStuff/timer/timer.css
JavaScript: andrewcombs13.com/ mystuff/minuterie/timer.js

Ma configuration:
Windows 7 64 bits
Firefox 29.0.1
Chrome 34.0.1847.137 m

Usi nq jQuery 1.11.1 et jQuery UI 1.10.4 de Google CDN

Answer 1

regardant comment Firefox est en train de changer les valeurs, il semble que Firefox a du mal à résoudre la propriété right css, après son arrêt en raison de la left:0px affecté à #slider. En supprimant left:0px de votre CSS, et en ajoutant width:100% semblait avoir résolu cela.

Answer 2

Au lieu d'utiliser animate, utilisez simplement css.

$("#Slider").css({right: sliderPercent.toString().concat("%")});

Cela va corriger votre problème.