Question

I’ve been testing a simple loop which moves something across the screen – but I’m seeing odd behaviour (almost certainly related to float errors) when setting CSS Properties through jQuery.

Basically I do something like this repeatedly

var val = parseInt($(myobject).css("left));
val -= 7;
$(myobject).css("left",val+"px");

If I test the value of the “left” property after that, I’ll see results such as

1042
1035
1028
1020 <<<< !!!!
1013
1006
...

Digging further, what seems to be happening is that I do this

$(myobject).css("left","1021px")
alert($(myobject).css("left"))

and what the alert shows is “1020.99876152371253716253px”

All I can think is that jQuery is internally stripping the “1021px” and assigning a non-rounded/fixed/ceiled/floored version of the number!?

Not sure where to raise this as a problem or if I’m missing something!?!?

p.s. updating to say I’m seeing this on latest public Chrome/W7-64

p.p.s. I copied my entire code (sans a webfont and 1 external function) into JSFiddle and it doesn’t misbehave (even in fullscreen) – but the code continues to misbehave when run standalone (despite being identical code in every respect!!) so I’m ever more mystified by this…

and more p.s. this only happens in Chrome, in IE (9) and Firefox (14) it works AOK – so clearly I have chanced on a quirk, and a very specific one at that (as it’s not reproducible in jsFiddle!!)

Answer 1

jQuery is assigning the value that you specified (“1021px”). It’s the browser that is producing the float value. I had a similar issue in one version of IE a while ago.

You can deal with this like so:

var val = Math.round( parseFloat( $( myobject ).css( 'left' ) ) );