Side navigation
#14494 closed bug (patchwelcome)
Opened October 29, 2013 09:20PM UTC
Closed October 31, 2013 04:07AM UTC
Element dimetions issue on Firefox 24/25
Reported by: | a.mirzoyan@dinamica.am | Owned by: | a.mirzoyan@dinamica.am |
---|---|---|---|
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
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)
Attachments (0)
Change History (5)
Changed October 29, 2013 09:45PM UTC by comment:1
component: | unfiled → css |
---|
Changed October 29, 2013 10:33PM UTC by comment:2
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.
Changed October 29, 2013 11:02PM UTC by comment:3
owner: | → a.mirzoyan@dinamica.am |
---|---|
status: | new → pending |
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.
Changed October 30, 2013 01:12AM UTC by comment:4
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);
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.
Changed October 31, 2013 04:07AM UTC by comment:5
resolution: | → patchwelcome |
---|---|
status: | pending → closed |
+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.
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.