feat(toolkit/observable): warn if document root is not positioned whe…

…n using `fromBoundingClientRect$`
SchweizerischeBundesbahnen · Oct 10, 2024 · de8d31a · de8d31a
1 parent 9979db9
commit de8d31a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/docs/site/tools/observable.md b/docs/site/tools/observable.md
@@ -85,7 +85,7 @@ fromBoundingClientRect$(element).subscribe((clientRect: DOMRect) => {
 ```
 
 ***
-The target element and the document root (`<html>`) must be positioned (`relative`, `absolute`, or `fixed`). If not, positioning is changed to `relative`.
+The target element and the document root (`<html>`) must be positioned `relative` or `absolute`. If not, a warning is logged and positioning is changed to `relative`.
 ***
 
 *Note:*

diff --git a/projects/scion/toolkit/observable/src/bounding-client-rect.observable.ts b/projects/scion/toolkit/observable/src/bounding-client-rect.observable.ts
@@ -20,8 +20,9 @@ import {fromResize$} from './resize.observable';
  *
  * Upon subscription, emits the current bounding box, and then continuously when the bounding box changes. The Observable never completes.
  *
- * The target element and the document root (`<html>`) must be positioned (`relative`, `absolute`, or `fixed`). If not, positioning is changed to `relative`.
- *
+ * The target element and the document root (`<html>`) must be positioned `relative` or `absolute`.
+ * If not, a warning is logged and positioning is changed to `relative`.
+
  * Note:
  * As of 2024, there is no native browser API to observe the position of an element. This implementation uses {@link IntersectionObserver} and
  * {@link ResizeObserver} to detect position changes. For tracking only size changes, use {@link fromResize$} instead.
@@ -217,6 +218,7 @@ function ensureElementPositioned(element: HTMLElement): void {
     const styleSheet = new CSSStyleSheet({});
     styleSheet.insertRule(`html { position: relative; }`);
     document.adoptedStyleSheets.push(styleSheet);
+    console?.warn?.('[@scion/toolkit] fromBoundingClientRect$ requires the document root element (<html>) to be positioned relative or absolute. Changing positioning to relative.');
   }
   else {
     setStyle(element, {position: 'relative'});
-Original file line number
+Diff line change
@@ Expand Up @@
     ```
     ***
-    The target element and the document root (`<html>`) must be positioned (`relative`, `absolute`, or `fixed`). If not, positioning is changed to `relative`.
+    The target element and the document root (`<html>`) must be positioned `relative` or `absolute`. If not, a warning is logged and positioning is changed to `relative`.
     ***
     *Note:*
@@ Expand Down @@