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
Post a Comment