Bug 1949953 - Show offset parent of fixed position elements if not ro…

…ot. r=devtools-reviewers,nchevobbe Shows in DevTools > Layout > Box Model > Box Model Properties. Differential Revision: https://phabricator.services.mozilla.com/D239268
mozilla · Feb 27, 2025 · 903705e · 903705e
1 parent 3f0a673
commit 903705e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -57,9 +57,14 @@ class BoxModelProperties extends PureComponent {
 
     if (
       propertyName === "position" &&
+      this.props.boxModel.offsetParent &&
       value !== "static" &&
-      value !== "fixed" &&
-      this.props.boxModel.offsetParent
+      // A fixed position element's offsetParent is the <body> element if its
+      // containing block is the viewport. We only show the offsetParent for
+      // fixed position elements if the offsetParent is not the viewport. This
+      // can occur if the element has an ancestor that creates a fixed position
+      // containing block, for instance with a `transform` declaration.
+      (value !== "fixed" || this.props.boxModel.offsetParent.tagName !== "BODY")
     ) {
       return {
         referenceElement: this.props.boxModel.offsetParent,

diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -13,6 +13,9 @@ const TEST_URI = `
   <div id="static"></div>
   <div id="no_parent" style="position: absolute"></div>
   <div id="fixed" style="position: fixed"></div>
+  <div id="transform" style="transform: translate(0,0)">
+    <div id="transform-fixed" style="position: fixed"></div>
+  </div>
 `;
 
 const OFFSET_PARENT_SELECTOR =
@@ -39,6 +42,10 @@ const res1 = [
     selector: "#fixed",
     offsetParentValue: null,
   },
+  {
+    selector: "#transform-fixed",
+    offsetParentValue: "div#transform",
+  },
 ];
 
 const updates = [