diff --git a/README.md b/README.md index b66d7bb3..64c4ecbb 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [![Netlify Status](https://api.netlify.com/api/v1/badges/61a20096-7925-4775-99a9-b40a010197c0/deploy-status)](https://app.netlify.com/sites/anchor-polyfill/deploys) -## Browser Support (needs testing) +## Browser Support - Firefox 54+ - Chrome 51+ @@ -24,3 +24,21 @@ To use the polyfill, add this script tag to your document ``: ``` You can view a more complete demo [here](https://anchor-polyfill.netlify.app/). + +## Limitations + +This polyfill doesn't (yet) support the following: + +- `position-fallback` property and `@position-fallback` rule +- `anchor-scroll` property +- dynamic anchor movement other than container resize/scroll + ([#73](https://github.com/oddbird/css-anchor-positioning/issues/73)) +- anchors or targets in the shadow-dom +- anchors in multi-column layouts +- dynamically added/removed anchors or targets +- top layer anchor elements +- anchor functions assigned to `inset-*` properties or `inset` shorthand + property +- anchor functions assigned to `bottom` or `right` properties on inline targets + whose offset-parent is inline with `clientHeight`/`clientWidth` of `0` +- vertical/rtl writing-modes (partial support) diff --git a/src/polyfill.ts b/src/polyfill.ts index e782c861..3893c3ac 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -188,7 +188,8 @@ export const getPixelValue = async ({ switch (targetProperty) { case 'bottom': { let offsetHeight = (offsetParent as HTMLElement).clientHeight; - // @@@ This is a hack for inline elements with `clientHeight: 0` + // This is a hack for inline elements with `clientHeight: 0`, + // but it doesn't take scrollbar size into account if (offsetHeight === 0 && isInline(offsetParent as HTMLElement)) { const border = getBorders(offsetParent as HTMLElement, axis); offsetHeight = (offsetParent as HTMLElement).offsetHeight - border; @@ -198,7 +199,8 @@ export const getPixelValue = async ({ } case 'right': { let offsetWidth = (offsetParent as HTMLElement).clientWidth; - // @@@ This is a hack for inline elements with `clientWidth: 0` + // This is a hack for inline elements with `clientWidth: 0`, + // but it doesn't take scrollbar size into account if (offsetWidth === 0 && isInline(offsetParent as HTMLElement)) { const border = getBorders(offsetParent as HTMLElement, axis); offsetWidth = (offsetParent as HTMLElement).offsetWidth - border; @@ -218,7 +220,7 @@ function position(rules: AnchorPositions) { const root = document.documentElement; Object.entries(rules).forEach(([targetSel, position]) => { - // @@@ This needs to be done for _every_ target element separately + // This needs to be done for _every_ target element separately const target: HTMLElement | null = document.querySelector(targetSel); if (