add support notes

oddbird · Jan 20, 2023 · 12d5933 · 12d5933
1 parent 650e972
commit 12d5933
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git 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 `<head>`:
 ```
 
 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
@@ -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 (