544473 - JavaScript/CSS: offsetLeft/offsetTop do not take into account a "floating" parent border

Status: NEW

(Core :: DOM: CSS Object Model, defect, P5)

Description

[XYZ]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
Build Identifier: Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

Please have a look at the code in the JS / CSS from the link provided above.
Basically it calculates relative mouse coordinates in a DIV to zoom the picture.
The mouse cursor if off by the border-width.

It works fine in Opera.

Reproducible: Always

Steps to Reproduce:
1.Load the page from the URL
2.Move the mouse over the left picture
3.[in Firebug, open the console and look at the results]
Actual Results:  
The mouse cursor is not in the center of the small div (opacity reduced)

Expected Results:  
Mouse cursor should be in the center.

Using Firebug.

Comment 1

[Ria Klaassen (not reading all bugmail)]

Confirmed with Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a1pre) Gecko/20100204 Minefield/3.7a1pre

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Since http://dev.w3.org/csswg/cssom-view/ is the relevant spec here, I'll call this CSS object model, although it could be DOM Events.

Yeah, I've also had problems trying to find an appropriate combination of APIs to convert mouse event coordinates to be relative to an element (e.g., an image).


Does our implementation of offsetLeft/offsetTop not match the above spec?

Comment 3

[Robert O'Callahan (:roc) (email my personal email if necessary)]

It probably doesn't, and I'm awfully scared of touching it.

Is the only problem with getBoundingClientRect that you want to convert from border-box coordinates to content-box coordinates?

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

For what it's worth, my exercise dealing with this was writing the "function coords(event)" in http://dbaron.org/css/timing-function-graphs .  I'm not sure if it's right for the general case, though.

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

That's looks OK except it wouldn't work if the <canvas> had border or padding.

Comment 6

[Firefox Bug Husbandry Bot]

https://bugzilla.mozilla.org/show_bug.cgi?id=1472046

Move all DOM bugs that haven't been updated in more than 3 years and has no one currently assigned to P5.

If you have questions, please contact :mdaly.