Timer: Somehow the layout was broken?

[moollaza]

I saw this happen once on DuckPAN but didn't think anything of it. Just happened again on the live site but I can't seem to re-create the problem

Seems like a timing issue of sorts? Like the elements on the page haven't been created or don't have their full width yet..

//cc @mattr555 @jagtalon @russellholt

[mattr555]

@moollaza I experienced this as well...but it's hit or miss. There might be race-condition media queries or something.

[chrismorast]

I got this too. Had to refresh half a dozen times for it to correct itself.

[moollaza]

@chrismorast hmm that's odd, we definitely need to find the cause and fix it then if it's occurring often

[jagtalon]

@bsstoner is right about that one.

[mattr555]

It looks like the div that holds the time is interfering somehow. If you take the display: none off of that div, you get:

I can reproduce this error consistently on an iPad. I also found that if I switch to images, then back to the timer, the problem will correct itself. It does appear to be something with the timing. Should everything be enclosed in a $(document).ready()?

I found that this worked, will PR:

//wait for the document to load before displaying things
//this makes sure the divs display at the right time so the layout doesn't break
//this fixes #959
$(document).ready(function(){
   $('#timer_buttons').css('display', 'inline-block');
   $timer_input.css('display', 'inline-block');
});