offset method returns incorrect value in Firefox #3080
Description
Hi,
I found a case that offset method returns incorrect value in Firefox.
offset method subtracts docElem.clientTop/clientLeft (i.e. border-width of html element), but Firefox seems to return 0 as clientTop/clientLeft of html element always.
For example:
https://jsfiddle.net/xwuc0g6q/
<html>
<body>
<div id="box1"></div>
</body>
</html>html {
border: 10px solid red;
}
body {
border: 10px solid blue;
margin: 20px;
padding: 30px;
/*position: relative;*/
}
#box1 {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background-color: green;
}$(function() {
var elem = document.getElementById('box1');
// <html>.clientLeft/clientTop
// from https://github.com/jquery/jquery/blob/305f193aa57014dc7d8fa0739a3fefd47166cd44/src/offset.js#L78
var doc = elem.ownerDocument,
docElem = doc.documentElement;
console.log(docElem.tagName + ' > clientLeft: ' + docElem.clientLeft + ' clientTop: ' + docElem.clientTop);
// document.body.clientLeft/clientTop
var body = document.body;
console.log(body.tagName + ' > clientLeft: ' + body.clientLeft + ' clientTop: ' + body.clientTop);
// getBoundingClientRect
var box = elem.getBoundingClientRect();
console.log('BoundingBox > left: ' + box.left + ' top: ' + box.top);
// jQuery#offset
var offset = $(elem).offset();
console.log('offset() > left: ' + offset.left + ' top: ' + offset.top);
});Res in Google Chrome:
HTML > clientLeft: 10 clientTop: 10
BODY > clientLeft: 10 clientTop: 10
BoundingBox > left: 0 top: 0
offset() > left: -10 top: -10
Res in IE:
HTML > clientLeft: 10 clientTop: 10
BODY > clientLeft: 10 clientTop: 10
BoundingBox > left: 0 top: 0
offset() > left: -10 top: -10
Res in Firefox:
HTML > clientLeft: 0 clientTop: 0
BODY > clientLeft: 10 clientTop: 10
BoundingBox > left: 0 top: 0
offset() > left: 0 top: 0
But I can't understand why the method subtracts docElem.clientTop/clientLeft.
If it do that for getting the position relative to the document, it should calculate based on border-box (i.e. outline that includes border). The box1 element in above code is positioned based on border-box even if html has border.
And also, html usually has no border.
Then, I feel that left: 0, top: 0 is correct result, and it is useful.