New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
position() function reports incorrect left offset under Chrome #2237
Comments
position() does not include the margins. For me, it's kind of reasonable. Because margin is part of the element. For ur example, the victim div locates at left 8px and top 158px, but it has 160.5px left margin and 0px top margin. So the border of it has 168.5px from the left and 158px from the top. Since you are not asking for position of the border of victim, so ...... |
@alburthoffman Thank you for your explanation. Though still my concern is the different behaviors of this method under different browser. In my view, when using jQuery I shall be exempt of caring for what browser I am facing. As the behavior of this method shows asymmetry and it is not mentioned in the API documentation. For this very case, I can obtain the correct result after switching to My suggestion is this method reporting same value under same browsers. Either subtracting margin value under Chrome, or follow the Chrome way in all cases. |
To report the same value though, we'd need to ignore the margin on the body in Chrome. There really is a margin on the body in Chrome: https://jsfiddle.net/yu3c361g/4/ So how do we rationalize ignoring a value set in CSS? |
This depends on browsers. I tested it in chrome 41 and safari. And they are the same. But in firefox, the left value is different, because the marginLeft is set to 0 in it. So it will require lots of browser version checking in this function if it has to return a same value. |
It seems like the way most pages would fix this is through a CSS reset or normalize? It seems consistent in Firefox for me BTW. |
@alburthoffman I think this is because they are all web-kit based, so I guess checking for the phrase 'Web-Kit' in navigator.userAgent is enough ? @dmethvin It is my honor to have an official reply from you. It comes as a side effect of "margin:0 auto", which browsers like Firefox interprets as directly horizontally center the div, while Chrome by calculating the margin left. If I drop "margin:0 auto" and give a concrete left margin to the div, in both Firefox and Chrome So is it possible to overload the After all, as you can see in this case, the left offset I want to know is definitely the gap from the left border of the div to the left boundary of page, excluding any margin. |
What I was suggesting is that if you set the margin to zero in all browsers it works fine: https://jsfiddle.net/yu3c361g/8/ |
@dmethvin I still see a discrepancy when the result pane is sufficiently wide, even with your latest fiddle. There is a bug here, but it's in Firefox and we've marked it "cantfix" on our side at least twice before: trac-11110 and trac-11813. |
It cannot be fixed in Firefox. It was caused by window.getComputedStyle() in FF. This function doesnot return caculated margins when margins are set to auto. One problem is to find a way to check if margins are set to auto or not in FF. No clues right now..... |
This is fixable with another "awesome hack"-style swap, but it might be big: https://jsfiddle.net/yu3c361g/9/ ...and if we do it right (with |
Awesome! Just curious about the swap part. why does it need to check marginTop? when marginTop is auto, then it should be 0px, right? |
Yes, of course. I just got carried away with the copypasta. |
I guess I'd be in favor of aligning the behavior. The swap is unfortunate, but we can limit its usage to this one case. |
Also, support_marginAuto can be calculated when jQuery starts, don't need to test it every time position is called. |
Test this
https://jsfiddle.net/Reimu/yu3c361g/2/
under Chrome and other browsers, you will see the
left
offset reported byposition()
method is incorrect under Chrome.The value of
left
offset under Chrome is the gap between <html> and <body>, not the real left offset of the horizontally centered <div>.This problem relates only with horizontally centered <div>s, and can be fixed by calculating manually with the
marginLeft
value of the element's computed style and the gap between <html> and <body>.Maybe this is due to a possible bug / design choice of Chrome, as there are also some discussion about it on StackOverflow. But I think jQuery is supposed to deal with such difference between browsers.
The text was updated successfully, but these errors were encountered: