1

I have a strange issue I'm encountering only on the iPad. It seems all other browsers can handle this just fine, but I have a condition similar to this:

if( parseFloat( $('#element1').css('opacity'),10).toFixed(2)!=userSetting1 ||
    parseFloat( $('#element2').css('opacity'),10).toFixed(2)!=userSetting2
  ){ return; };

... rest of function

So, basically I have a couple of elements that animate from a user action. To prevent the user from continuously firing the rest of the function, I'm testing to see if the element has finished animating its opacity. The usersetting1 and 2 are the opacities that the user sets element1 and 2 to animate to respectively.

So, basically, if the opacity hasn't reached the user set opacity, it drops out of the function. Works great everywhere but the iPad and it's based on an issue with parseFloat.

If the user sets 0.15, 0.25, etc as their opacity setting, then the parseFloat(,10).toFixed(2) will work and allow for the condition to test properly.

However if the user sets 1 or 0 for the opacity, it screws everything up. Apparently the iPad doesn't think that 1.0 = 1.

If there any way around this?

Aaron
  • 2,482
  • 1
  • 26
  • 56
  • some of the weirdest code formatting i've ever seen. but +1 good question. – user428517 May 14 '13 at 20:59
  • Maybe it becomes `0.99` for some reason? I have a feeling it has to do with floating point arithmetic in some way. Although I'm not sure what your `parseFloat(,10).toFixed(2)` is... – Ian May 14 '13 at 21:03
  • jQuery can do $('element').is(':animated') to test if something is animating, perhaps that's a better test to be doing than comparing opacity string values. http://api.jquery.com/animated-selector/ – Matt Berkowitz May 14 '13 at 21:07
  • When comparing floats, you are better to use `<=` or similar comparison rather than *toFixed* and `==` since you may be getting very small rounding differences that make them `!=`. e.g. `if (x - userSetting <= 1e-10)` – RobG May 14 '13 at 22:59

2 Answers2

0

Ok, just figured this out. The iPad seems to be animating my element (say if userSetting1 was 0.15) to 0.1503850384038439248. So, I had to run the .toFixed(2) on both the user setting and the .css pull.

Aaron
  • 2,482
  • 1
  • 26
  • 56
0
 var iOS = parseFloat(('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
    .replace('undefined', '3_2').replace('_', '.').replace('_', ''));
 if( iOS ( $('#element1').css('opacity'),10).toFixed(2)!=userSetting1 ||
iOS ( $('#element2').css('opacity'),10).toFixed(2)!=userSetting2){ return; };
Vatsal Pathak
  • 60
  • 10