1962236 - clientX and clientY reported positions are very wrong.

Status: UNCONFIRMED

(Core :: DOM: Events, defect)

Description

[Joe]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Steps to reproduce:

I have a drag and drop implementation and a calculation that should find the top left of the element to facilitate the accurate drop of the element that lines up with the ghost element.

Actual results:

In Firefox, the calculation returns an unevenly offset location that results in placement that is too high and too far left, in differing amounts, requiring the use of some very odd magic numbers to fix:

const elementMarginChrome = 14;
const elementMarginFoxX = 10;
const elementMarginFoxY = 5;

---- other code ---

if (isFirefox) {
// For Firefox
console.log("Firefox detected: Using magic number offset calculation.");
finalX = dropXRelativeToStage + elementMarginFoxX;
finalY = dropYRelativeToStage + elementMarginFoxY;
} else {
// For Chrome and other browsers
console.log("Non-Firefox detected: Using margin-compensated calculation.");
finalX = dropXRelativeToStage - elementMarginChrome;
finalY = dropYRelativeToStage - elementMarginChrome;
}

Expected results:

Firefox should be able to use the normal margin compensated offset that works in Chrome and other browsers.

Comment 1

[Francesco Lodolo [:flod]]

Can you provide a minimal example of working code instead of the code to work around the differences? e.g. where are you calculating dropXRelativeToStage and dropYRelativeToStage.

Comment 2

[Joe]

Attachment: Working code

Comment 3

[Joe]

Here is a more complete section of my drag and drop logic

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Joe from comment #3)

Here is a more complete section of my drag and drop logic

Thanks -- that looks like a snippet of JS, which doesn't do anything on its own without the accompanying HTML.

Would you mind posting a complete-and-working testcase to demonstrate the issue? (e.g. as a standalone HTML file, with the relevant JS included in a <script> element)