Skip to content

Commit

Permalink
fix: apply offsetParent polyfill for Chrome 109+ (#6520)
Browse files Browse the repository at this point in the history
**Related Issue:** #6300 

## Summary

This addresses positioning issues in Chrome 109+. Version 109 updated
offsetParent behavior to follow the latest spec changes from
w3c/csswg-drafts#159.
  • Loading branch information
jcfranco authored Feb 28, 2023
1 parent 7b95194 commit ba8c068
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 625 deletions.
35 changes: 19 additions & 16 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
"url": "git+https://github.com/Esri/calcite-components.git"
},
"dependencies": {
"@floating-ui/dom": "1.1.0",
"@floating-ui/dom": "1.2.1",
"@stencil/core": "2.20.0",
"@types/color": "3.0.3",
"color": "4.2.3",
Expand Down
35 changes: 25 additions & 10 deletions src/utils/floating-ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,44 @@ async function patchFloatingUiForNonChromiumBrowsers(): Promise<void> {
platform: string;
}

function getUAData(): NavigatorUAData | undefined {
return (navigator as any).userAgentData;
}

function getUAString(): string {
const uaData = (navigator as any).userAgentData as NavigatorUAData | undefined;
const uaData = getUAData();

return uaData?.brands
? uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ")
: navigator.userAgent;
}

function isChrome109OrAbove(): boolean {
const uaData = getUAData();

if (uaData?.brands) {
return uaData.brands.map((item) => `${item.brand}/${item.version}`).join(" ");
return !!uaData.brands.find(
({ brand, version }) => (brand === "Google Chrome" || brand === "Chromium") && Number(version) >= 109
);
}

return navigator.userAgent;
return !!navigator.userAgent.split(" ").find((ua) => {
const [browser, version] = ua.split("/");

return browser === "Chrome" && parseInt(version) >= 109;
});
}

if (
Build.isBrowser &&
config.floatingUINonChromiumPositioningFix &&
// ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
/firefox|safari/i.test(getUAString())
(/firefox|safari/i.test(getUAString()) || isChrome109OrAbove())
) {
const { getClippingRect, getElementRects, getOffsetParent } = await import(
"./floating-ui/nonChromiumPlatformUtils"
);
const { offsetParent } = await import("./floating-ui/utils");

platform.getClippingRect = getClippingRect;
platform.getOffsetParent = getOffsetParent;
platform.getElementRects = getElementRects as any;
const originalGetOffsetParent = platform.getOffsetParent;
platform.getOffsetParent = (element: Element) => originalGetOffsetParent(element, offsetParent);
}
}

Expand Down
Loading

0 comments on commit ba8c068

Please sign in to comment.