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




DOM: CSS Object Model
9 years ago
8 years ago


(Reporter: XYZ, Unassigned)



Firefox Tracking Flags

(Not tracked)





9 years ago
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.
Confirmed with Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a1pre) Gecko/20100204 Minefield/3.7a1pre
OS: Linux → All
Hardware: x86_64 → All
Version: unspecified → Trunk
Component: General → General
Ever confirmed: true
Product: Firefox → Core
QA Contact: general → general
Since 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?
Component: General → DOM: CSS Object Model
QA Contact: general → general
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?
For what it's worth, my exercise dealing with this was writing the "function coords(event)" in .  I'm not sure if it's right for the general case, though.
That's looks OK except it wouldn't work if the <canvas> had border or padding.
QA Contact: general → style-system
You need to log in before you can comment on or make changes to this bug.