2

I've written a simple timer application that changes the color of the background as the timer progresses, giving a visual indication of how close to being out of time you are. This seems to work fine in Chrome, but encounters serious issues in Firefox. Instead of sliding cleanly across the page, the background flickers and jumps until it gets very close to the end, at which point it behaves as expected.

EDIT: The issue did, in fact, turn out to be a problem with the CSS. The JavaScript/jQuery is 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 is the current time remaining on the timer, window.timeSet is the initial value of the timer, window.tickLength is how often the function to progress the timer is called, and window.lastSliderPercent is used only here.

Full source can be 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 and jQuery UI 1.10.4 from Google CDN

0

2 Answers 2

0

Looking at how Firefox was changing the values, it seems that Firefox has trouble resolving the right css property, after it stops because of the left:0px assigned to #slider. Removing left:0px from your css, and adding width:100% seemed to have resolved this.

0

Instead of using animate, just use css.

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

This will fix your problem.

Not the answer you're looking for? Browse other questions tagged or ask your own question.