Skip to content

Commit d445db9

Browse files
atomiksGitHub Actions
atomiks
and
GitHub Actions
authored
fix: handle html relative offset (#3045)
Co-authored-by: GitHub Actions <[email protected]>
1 parent 3ef13a9 commit d445db9

11 files changed

+77
-11
lines changed

‎.changeset/dirty-cameras-appear.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@floating-ui/dom": patch
3+
---
4+
5+
fix: handle html relative offset

‎packages/dom/src/platform/getOffsetParent.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
getComputedStyle,
33
getContainingBlock,
4+
getDocumentElement,
45
getParentNode,
56
getWindow,
67
isContainingBlock,
@@ -29,7 +30,17 @@ function getTrueOffsetParent(
2930
return polyfill(element);
3031
}
3132

32-
return element.offsetParent;
33+
let rawOffsetParent = element.offsetParent;
34+
35+
// Firefox returns the <html> element as the offsetParent if it's non-static,
36+
// while Chrome and Safari return the <body> element. The <body> element must
37+
// be used to perform the correct calculations even if the <html> element is
38+
// non-static.
39+
if (getDocumentElement(element) === rawOffsetParent) {
40+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
41+
}
42+
43+
return rawOffsetParent;
3344
}
3445

3546
// Gets the closest ancestor positioned element. Handles some edge cases,

‎packages/dom/src/utils/getRectRelativeToOffsetParent.ts

+17-2
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,27 @@ export function getRectRelativeToOffsetParent(
4343
offsets.x = offsetRect.x + offsetParent.clientLeft;
4444
offsets.y = offsetRect.y + offsetParent.clientTop;
4545
} else if (documentElement) {
46+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
47+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
4648
offsets.x = getWindowScrollBarX(documentElement);
4749
}
4850
}
4951

50-
const x = rect.left + scroll.scrollLeft - offsets.x;
51-
const y = rect.top + scroll.scrollTop - offsets.y;
52+
let htmlX = 0;
53+
let htmlY = 0;
54+
55+
if (documentElement && !isOffsetParentAnElement && !isFixed) {
56+
const htmlRect = documentElement.getBoundingClientRect();
57+
htmlY = htmlRect.top + scroll.scrollTop;
58+
htmlX =
59+
htmlRect.left +
60+
scroll.scrollLeft -
61+
// RTL <body> scrollbar.
62+
getWindowScrollBarX(documentElement, htmlRect);
63+
}
64+
65+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
66+
const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
5267

5368
return {
5469
x,

‎packages/dom/src/utils/getWindowScrollBarX.ts

+10-7
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import {getNodeScroll} from '@floating-ui/utils/dom';
33
import {getDocumentElement} from '../platform/getDocumentElement';
44
import {getBoundingClientRect} from './getBoundingClientRect';
55

6-
export function getWindowScrollBarX(element: Element): number {
7-
// If <html> has a CSS width greater than the viewport, then this will be
8-
// incorrect for RTL.
9-
return (
10-
getBoundingClientRect(getDocumentElement(element)).left +
11-
getNodeScroll(element).scrollLeft
12-
);
6+
// If <html> has a CSS width greater than the viewport, then this will be
7+
// incorrect for RTL.
8+
export function getWindowScrollBarX(element: Element, rect?: DOMRect): number {
9+
const leftScroll = getNodeScroll(element).scrollLeft;
10+
11+
if (!rect) {
12+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
13+
}
14+
15+
return rect.left + leftScroll;
1316
}

‎packages/dom/test/functional/relative.test.ts

+11
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,15 @@ import {click} from './utils/click';
1212
`${node}.png`,
1313
);
1414
});
15+
16+
test(`correctly positioned on bottom when ${node} is an offsetParent with an offset of -100px`, async ({
17+
page,
18+
}) => {
19+
await page.goto('http://localhost:1234/relative');
20+
await click(page, `[data-testid="relative-${node}"]`);
21+
await click(page, `[data-testid="offset-100"]`);
22+
expect(await page.locator('.container').screenshot()).toMatchSnapshot(
23+
`${node}-offset-100.png`,
24+
);
25+
});
1526
});

‎packages/dom/test/functional/relative.test.ts-snapshots/body-offset-100-linux.png

5.54 KB
Loading

‎packages/dom/test/functional/relative.test.ts-snapshots/html-offset-100-linux.png

5.54 KB
Loading

‎packages/dom/test/functional/relative.test.ts-snapshots/null-offset-100-linux.png

16.4 KB
Loading

‎packages/dom/test/functional/relative.test.ts-snapshots/offsetParent-offset-100-linux.png

16.4 KB
Loading

‎packages/dom/test/functional/transform.test.ts-snapshots/html-linux.png

-2 Bytes
Loading

‎packages/dom/test/visual/spec/Relative.tsx

+22-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const NODES: Node[] = [null, 'html', 'body', 'offsetParent'];
88

99
export function Relative() {
1010
const [node, setNode] = useState<Node>(null);
11+
const [offset, setOffset] = useState(0);
1112
const {x, y, refs, strategy, update} = useFloating();
1213

1314
useLayoutEffect(() => {
@@ -21,20 +22,23 @@ export function Relative() {
2122
element = document.body;
2223
break;
2324
default:
25+
element = document.querySelector('.container');
2426
}
2527

2628
if (element) {
2729
element.style.position = 'relative';
30+
element.style.top = `${-offset}px`;
2831
}
2932

3033
update();
3134

3235
return () => {
3336
if (element) {
3437
element.style.position = '';
38+
element.style.top = '';
3539
}
3640
};
37-
}, [node, update]);
41+
}, [node, offset, update]);
3842

3943
return (
4044
<>
@@ -63,6 +67,7 @@ export function Relative() {
6367
</div>
6468
</div>
6569

70+
<h2>Node</h2>
6671
<Controls>
6772
{NODES.map((localNode) => (
6873
<button
@@ -77,6 +82,22 @@ export function Relative() {
7782
</button>
7883
))}
7984
</Controls>
85+
86+
<h2>Offset</h2>
87+
<Controls>
88+
{[0, 100].map((localOffset) => (
89+
<button
90+
key={localOffset}
91+
data-testid={`offset-${localOffset}`}
92+
onClick={() => setOffset(localOffset)}
93+
style={{
94+
backgroundColor: offset === localOffset ? 'black' : '',
95+
}}
96+
>
97+
{localOffset}
98+
</button>
99+
))}
100+
</Controls>
80101
</>
81102
);
82103
}

0 commit comments

Comments
 (0)