Bug Tracker

Opened 6 years ago

Closed 6 years ago

#14494 closed bug (patchwelcome)

Element dimetions issue on Firefox 24/25

Reported by: a.mirzoyan@… Owned by: a.mirzoyan@…
Priority: undecided Milestone: None
Component: css Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:

Description

Firefox doesn't allow numbers formatted like "5.0000000000000005e-12px" to be set to element style.

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0 Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0

Example in JSFinddle http://jsfiddle.net/USjkD/4/

As you can see in the example, I try to set top to "5.0000000000000005e-12" which is nearly zero. This is a rare case but it happens due to calculations.

Sure we can round() the number before passing it to css() function, but it is not always convenient.

My suggestion is to format the number like "0.000000000005" form before appending the "px".

line: 6808 If a number was passed in, add 'px' to the (except for certain CSS properties) if ( type === "number" && !jQuery.cssNumber[ origName ] ) { value += "px"; }

This works fine on Chrome and IE Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)

Change History (5)

comment:1 Changed 6 years ago by gibson042

Component: unfiledcss

A CSS number is either an integer or "zero or more digits followed by a dot (.) followed by one or more digits". 5.0000000000000005e-12px is invalid, and I'm not sure we want everyone downloading jQuery to bear the burden of additional code for normalizing extreme-valued input numbers.

comment:2 Changed 6 years ago by anonymous

The 5.0000000000000005e-12 is a valid floating point value in javascript, by simply adding "px" jquery creates invalid string "5.0000000000000005e-12px" and then tries to pass it to CSS.

comment:3 Changed 6 years ago by gibson042

Owner: set to a.mirzoyan@…
Status: newpending

I understand that. What I don't understand (but am willing to listen to arguments on) is why the changes (and additional size and performance hit and ongoing maintenance) required to specify CSS values with more precision than would ever be noticed should live within jQuery instead of in more special-purpose code.

comment:4 Changed 6 years ago by anonymous

The issue is not about precision, but about ignoring the assignments. Assume a code which does some calculations and returns an object containing left,top,width,height and something else, then assume that the left value is something like 5.000e-12 it should have been 0 but due to divisions, sqrt whatever it isn't exactly 0. In this case if you pass this object to jquery it will assign top,width,height but will skip left (this is what exactly happened to me). If jquery is going to stay with this issue then we should agree with the this note "Don't pass any variable to jquery without formatting it, or without forcing lower precision or you will get unexpected behavior".

BTW: People may think that the following code outputs 0.

console.log(-1 + 1.15 - 0.15);

http://jsfiddle.net/Z8KcL/

But unfortunately no, it outputs something like -8.326672684688674e-17 in most of browsers. This is well know issue of floating point type. And if you pass this to jquery it will just ignore that.

comment:5 Changed 6 years ago by gibson042

Resolution: patchwelcome
Status: pendingclosed

+84 bytes to dist/jquery.min.js and it doesn't even work consistently in all browsers: https://github.com/gibson042/jquery/compare/jquery:d8576139...14494

I recommend normalizing extreme values intended for CSS properties.

Note: See TracTickets for help on using tickets.