javascript - jQuery animate() Buggy in Firefox -


this question has answer here:

i've written simple timer application changes color of background timer progresses, giving visual indication of how close being out of time are. seems work fine in chrome, encounters serious issues in firefox. instead of sliding cleanly across page, background flickers , jumps until gets close end, @ point behaves expected.

edit: issue did, in fact, turn out problem css. javascript/jquery correct.

the page: andrewcombs13.com/mystuff/timer/

relevant html:

<div id="slider"></div> 

relevant css:

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

relevant javascript:

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; 

where window.time current time remaining on timer, window.timeset initial value of timer, window.ticklength how function progress timer called, , window.lastsliderpercent used here.

full source can found here:
html: view-source:andrewcombs13.com/mystuff/timer/
css: andrewcombs13.com/mystuff/timer/timer.css
javascript: andrewcombs13.com/mystuff/timer/timer.js

my setup:
windows 7 64-bit
firefox 29.0.1
chrome 34.0.1847.137 m

using jquery 1.11.1 , jquery ui 1.10.4 google cdn

looking @ how firefox changing values, seems firefox has trouble resolving right css property, after stops because of left:0px assigned #slider. removing left:0px css, , adding width:100% seemed have resolved this.


Comments

Popular posts from this blog

how to proxy from https to http with lighttpd -

android - Automated my builds -

python - Flask migration error -