From d40f68ba5685df1a08b0f52480164d3febfd9da4 Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Wed, 19 Aug 2026 18:28:28 +0800
Subject: [PATCH] webapi: improve "rendering" of an element's left position

1. The horizontal position of an element is now calculated based on the
horizontal position of it's siblings (up the tree). Rather than merely the
count * default width.

2. translateX is parsed on inline styles and applies to the horizontal position

1 & 2 fix the https://lseo.com/ issue, but they add overhead to APIs that can be
used a lot. So:

3. Most element dimensions api relied on getElementDimensions which calculated
   both the height and width dimensions, even though they only needed once
   (e.g. getClientHeight only needs the height). These methods now only get
   the axis that they care about

4. Because we do more style sheet lookups, and thus more lookups in
   Frame._element_styles, Element.flags now has an has_inline_style which
   helps avoid the lookup.
---
 src/browser/Frame.zig                         |   3 +-
 src/browser/StyleManager.zig                  |   6 +-
 src/browser/frame/node_factory.zig            |   5 +-
 src/browser/frame/observers.zig               |   2 +-
 src/browser/parser/Parser.zig                 |   1 +
 src/browser/tests/element/position.html       |  77 +++++
 src/browser/webapi/CSS.zig                    |  41 +++
 src/browser/webapi/Document.zig               |  20 +-
 src/browser/webapi/Element.zig                | 278 ++++++++----------
 src/browser/webapi/ResizeObserver.zig         |   6 +-
 .../webapi/css/CSSStyleDeclaration.zig        |   7 +-
 src/cdp/domains/dom.zig                       |   2 +-
 12 files changed, 277 insertions(+), 171 deletions(-)

diff --git a/src/browser/Frame.zig b/src/browser/Frame.zig
index 1ff57df9d..a4cdb1845 100644
--- a/src/browser/Frame.zig
+++ b/src/browser/Frame.zig
@@ -2965,6 +2965,7 @@ pub fn attributeChange(self: *Frame, element: *Element, name: String, value: Str
         const old = if (old_value) |o| o.str() else null;
         popover.attributeChanged(element, old, value.str(), self);
     } else if (name.eql(comptime .wrap("style"))) {
+        element._flags.has_inline_style = true;
         self.styleAttributeChanged(element, value.str());
     }
 }
@@ -2993,7 +2994,7 @@ pub fn attributeRemove(self: *Frame, element: *Element, name: String, old_value:
 }
 
 fn styleAttributeChanged(self: *Frame, element: *Element, value: ?[]const u8) void {
-    const style = self._element_styles.get(element) orelse return;
+    const style = element.getStyle(self) orelse return;
     style.asCSSStyleDeclaration().styleAttributeChanged(value, self) catch |err| {
         log.err(.frame, "style attribute reparse", .{ .err = err, .type = self._type, .url = self.url });
     };
diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 6dc83ead9..8f2791751 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -1194,7 +1194,11 @@ const INLINE_PRIORITY: u64 = std.math.maxInt(u64);
 // `frame` is the StyleManager's frame, which callers guarantee is el's owner
 // frame (el.ownerFrame) — the map where the materialized style lives.
 fn getInlineStyleProperty(el: *Element, property_name: String, frame: *Frame) ?*CSSStyleProperty {
-    const style = frame._element_styles.get(el) orelse blk: {
+    if (!el._flags.has_inline_style) {
+        // Neither a style object nor a style attribute; skip both lookups.
+        return null;
+    }
+    const style = el.getStyle(frame) orelse blk: {
         // No JS-set style object and no style attribute -> nothing inline to read.
         if (el.getAttributeSafe(comptime .wrap("style")) == null) return null;
         break :blk el.getOrCreateStyle(frame) catch |err| {
diff --git a/src/browser/frame/node_factory.zig b/src/browser/frame/node_factory.zig
index 6de08a90d..042d05ea3 100644
--- a/src/browser/frame/node_factory.zig
+++ b/src/browser/frame/node_factory.zig
@@ -1073,7 +1073,9 @@ fn initSvgElement(frame: *Frame, element: *Element, attribute_iterator: anytype)
 fn populateElementAttributes(frame: *Frame, element: *Element, list: anytype) !void {
     if (@TypeOf(list) == *Element.Attribute.List or @TypeOf(list) == *const Element.Attribute.List) {
         // from cloneNode
-        return element._attributes.cloneFrom(list, frame);
+        try element._attributes.cloneFrom(list, frame);
+        element.noteStyleAttribute();
+        return;
     }
 
     // from the parser
@@ -1090,6 +1092,7 @@ fn populateElementAttributes(frame: *Frame, element: *Element, list: anytype) !v
         const name = try parserAttributeName(frame, attr.name);
         try attributes.putNew(name, attr.value.slice(), frame);
     }
+    element.noteStyleAttribute();
 }
 
 // Attributes are keyed by qualified name (no namespace model), so a prefixed
diff --git a/src/browser/frame/observers.zig b/src/browser/frame/observers.zig
index 60ada05ef..34126fb76 100644
--- a/src/browser/frame/observers.zig
+++ b/src/browser/frame/observers.zig
@@ -212,7 +212,7 @@ pub fn performScheduledResizeChecks(frame: *Frame) void {
 }
 
 // Only these attributes can change an element's size or visibility in our
-// styling model (StyleManager.isHidden + Element.getElementDimensions), and
+// styling model (StyleManager.isHidden + Element.getElementAxis), and
 // only for the element itself and its descendants — so a delivery is only
 // scheduled when an observed element is in the changed element's subtree.
 fn resizeAttributeChanged(frame: *Frame, element: *Element, name: String) void {
diff --git a/src/browser/parser/Parser.zig b/src/browser/parser/Parser.zig
index f735916ad..95d403f96 100644
--- a/src/browser/parser/Parser.zig
+++ b/src/browser/parser/Parser.zig
@@ -590,6 +590,7 @@ fn _addAttrsIfMissingCallback(self: *Parser, node: *Node, attributes: h5e.Attrib
         // putNew only adds if the attribute doesn't already exist
         try attr_list.putNew(name, value, frame);
     }
+    element.noteStyleAttribute();
 }
 
 fn getTemplateContentsCallback(ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) ?*anyopaque {
diff --git a/src/browser/tests/element/position.html b/src/browser/tests/element/position.html
index 2d653d46c..6147cb0b4 100644
--- a/src/browser/tests/element/position.html
+++ b/src/browser/tests/element/position.html
@@ -168,6 +168,83 @@
 }
 </script>
 
+<script id="recycleTickerLoop">
+{
+  // The recycle variant of the marquee idiom (lseo.com): slide the track with
+  // translateX and, whenever the last card has left the shell on one side,
+  // move it to the other end of the track and offset the translation by its
+  // width so the remaining cards stay put. The loop is bounded only because
+  // the translation is honored: ignore it and each rotation pushes the cards
+  // further out of the shell.
+  const shell = document.createElement('div');
+  const track = document.createElement('div');
+  for (let i = 0; i < 4; i++) {
+    track.appendChild(document.createElement('div'));
+  }
+  shell.appendChild(track);
+  document.body.appendChild(shell);
+
+  const sRect = shell.getBoundingClientRect();
+  const recycle = (x, reverse) => {
+    let guard = 0;
+    while (guard < 50) {
+      const el = reverse ? track.lastElementChild : track.firstElementChild;
+      const r = el.getBoundingClientRect();
+      if (reverse ? r.left < sRect.right : r.right > sRect.left) break;
+      const w = el.offsetWidth;
+      if (reverse) {
+        track.insertBefore(el, track.firstElementChild);
+        x -= w;
+      } else {
+        track.appendChild(el);
+        x += w;
+      }
+      track.style.transform = `translateX(${x}px)`;
+      guard++;
+    }
+    return guard;
+  };
+
+  // Right-to-left: the track has slid 60px; every card is out on the right.
+  track.style.transform = 'translateX(60px)';
+  testing.expectTrue(recycle(60, true) < 50);
+  testing.expectTrue(track.firstElementChild.getBoundingClientRect().left < sRect.right);
+
+  // Left-to-right, from the same shifted state.
+  track.style.transform = 'translateX(-60px)';
+  testing.expectTrue(recycle(-60, false) < 50);
+  testing.expectTrue(track.lastElementChild.getBoundingClientRect().right > sRect.left);
+}
+</script>
+
+<script id="translateX">
+{
+  const shell = document.createElement('div');
+  const track = document.createElement('div');
+  const card = document.createElement('div');
+  track.appendChild(card);
+  shell.appendChild(track);
+  document.body.appendChild(shell);
+
+  // A row starts at its parent's left edge.
+  const base = shell.getBoundingClientRect().x;
+  testing.expectEqual(base, card.getBoundingClientRect().x);
+  testing.expectEqual(base, card.offsetLeft);
+
+  // The X translation of the element and of its ancestors moves it.
+  track.style.transform = 'translateX(-12.5px)';
+  testing.expectEqual(base - 12.5, card.getBoundingClientRect().x);
+  testing.expectEqual(base - 12.5, card.offsetLeft);
+  card.style.transform = 'translate3d(2px, 100px, 0) rotate(45deg) matrix(1, 0, 0, 1, 3, 9)';
+  testing.expectEqual(base - 7.5, card.getBoundingClientRect().x);
+  testing.expectEqual(base - 7.5, card.offsetLeft);
+
+  // Percentages and other units are not resolved.
+  track.style.transform = 'translateX(-100%)';
+  testing.expectEqual(base + 5, card.getBoundingClientRect().x);
+}
+</script>
+
 <script id="computedWidthMarqueeLoop">
 {
   // The getComputedStyle variant of the marquee idiom (inchurch.com.br's
diff --git a/src/browser/webapi/CSS.zig b/src/browser/webapi/CSS.zig
index d93970074..0924def2f 100644
--- a/src/browser/webapi/CSS.zig
+++ b/src/browser/webapi/CSS.zig
@@ -20,6 +20,7 @@ const std = @import("std");
 const js = @import("../js/js.zig");
 const Frame = @import("../Frame.zig");
 const units = @import("../css/units.zig");
+const Tokenizer = @import("../css/Tokenizer.zig");
 
 const CSS = @This();
 _pad: bool = false,
@@ -46,6 +47,46 @@ pub fn parseDimensionViewport(value: []const u8, frame: *Frame) ?f64 {
     };
 }
 
+// Extract the X value from a transfrom. This could come from a translate,
+// translatex, translate3d or matrix function.
+pub fn parseTranslateX(value: []const u8) f64 {
+    var total: f64 = 0.0;
+    var tokenizer: Tokenizer = .{ .input = value };
+    while (tokenizer.next()) |token| {
+        const name = switch (token) {
+            .function => |name| name,
+            else => continue,
+        };
+        const x_arg: usize = blk: {
+            if (std.ascii.eqlIgnoreCase(name, "translatex") or std.ascii.eqlIgnoreCase(name, "translate") or std.ascii.eqlIgnoreCase(name, "translate3d")) {
+                // x is the first arg in all these cases
+                break :blk 0;
+            }
+            if (std.ascii.eqlIgnoreCase(name, "matrix")) {
+                // x is the 4th arg in the matrix
+                break :blk 4;
+            }
+            continue;
+        };
+
+        var arg: usize = 0;
+        while (tokenizer.next()) |t| {
+            switch (t) {
+                .close_parenthesis => break,
+                .comma => arg += 1,
+                .number => |n| if (arg == x_arg) {
+                    total += n.value;
+                },
+                .dimension => |d| if (arg == x_arg and std.ascii.eqlIgnoreCase(d.unit, "px")) {
+                    total += d.value;
+                },
+                else => {},
+            }
+        }
+    }
+    return total;
+}
+
 /// Escapes a CSS identifier string
 /// https://drafts.csswg.org/cssom/#the-css.escape()-method
 pub fn escape(value: []const u8, frame: *Frame) ![]const u8 {
diff --git a/src/browser/webapi/Document.zig b/src/browser/webapi/Document.zig
index a90c7d14a..e5a81d62c 100644
--- a/src/browser/webapi/Document.zig
+++ b/src/browser/webapi/Document.zig
@@ -917,15 +917,17 @@ fn elementFromPointImpl(self: *Document, x: f64, y: f64, ignore_x: bool, frame:
         preorder_index += 1;
         if (node.is(Element)) |element| {
             if (element.checkVisibilityCached(&visibility_cache, frame)) {
-                const dims = element.getElementDimensions(frame);
-                // x and y both come from preorder position in our faux layout.
-                const left = pos;
-                const top = pos;
-                const right = pos + dims.width;
-                const bottom = pos + dims.height;
-                const x_contained = ignore_x or (x >= left and x <= right);
-                if (x_contained and y >= top and y <= bottom) {
-                    topmost = element;
+                if (y >= pos and y <= pos + element.boxAxis(frame, .height)) {
+                    if (ignore_x) {
+                        topmost = element;
+                    } else {
+                        // only bother calculating the horiziontal position for
+                        // elements contained by the vertical band
+                        const left = element.horizontalPosition(frame);
+                        if (x >= left and x <= left + element.boxAxis(frame, .width)) {
+                            topmost = element;
+                        }
+                    }
                 }
             }
         }
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 5eab95796..469390bd7 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -146,7 +146,13 @@ pub const Flags = packed struct(u8) {
     // approach
     click_in_progress: bool = false,
 
-    _unused: u5 = 0,
+    // The element may have inline style: a materialized entry in the frame's
+    // _element_styles, or a `style` attribute not yet materialized. Set once,
+    // never cleared. A clear bit lets the faux layout skip both the map probe
+    // and the attribute scan for the many elements that have neither.
+    has_inline_style: bool = false,
+
+    _unused: u4 = 0,
 };
 
 _type: Type,
@@ -979,13 +985,26 @@ pub fn getOrCreateStyle(self: *Element, frame: *Frame) !*CSSStyleProperties {
     if (!gop.found_existing) {
         gop.value_ptr.* = try CSSStyleProperties.init(self, false, owner);
     }
+    self._flags.has_inline_style = true;
     return gop.value_ptr.*;
 }
 
-fn getStyle(self: *Element, frame: *Frame) ?*CSSStyleProperties {
+pub fn getStyle(self: *Element, frame: *Frame) ?*CSSStyleProperties {
+    if (!self._flags.has_inline_style) {
+        return null;
+    }
     return self.ownerFrame(frame)._element_styles.get(self);
 }
 
+// Marks the element as possibly having inline style once a `style` attribute
+// lands on it. Attribute population paths that bypass attributeChange (the
+// parser, cloneNode) call this after filling the list.
+pub fn noteStyleAttribute(self: *Element) void {
+    if (self._attributes.hasSafe(comptime .wrap("style"))) {
+        self._flags.has_inline_style = true;
+    }
+}
+
 pub fn setStyle(self: *Element, value: []const u8, frame: *Frame) !void {
     const style = try self.getOrCreateStyle(frame);
     try style.asCSSStyleDeclaration().setCssText(value, frame);
@@ -1314,6 +1333,14 @@ pub fn checkVisibilityCached(self: *Element, cache: ?*VisibilityCache, frame: *F
     return !self.ownerFrame(frame)._style_manager.isHidden(self, cache, .{});
 }
 
+// The element's own display:none only, no ancestor walk. For a child or
+// sibling of an element already known to be visible, that is the whole
+// answer: they share the visible ancestor chain — and the owner frame, which
+// the caller resolves once rather than per element.
+fn isVisibleSelf(self: *Element, style_manager: *StyleManager) bool {
+    return !style_manager.hasDisplayNone(self);
+}
+
 const CheckVisibilityOpts = struct {
     checkOpacity: bool = false,
     opacityProperty: bool = false,
@@ -1328,100 +1355,77 @@ pub fn checkVisibility(self: *Element, opts_: ?CheckVisibilityOpts, frame: *Fram
     });
 }
 
-pub const Dimensions = struct {
-    width: f64,
-    height: f64,
-    // if the value is explicit (e.g. inline style, width attribute, ...) or defaulted
-    explicit_width: bool = false,
-    explicit_height: bool = false,
+pub const Axis = enum {
+    width,
+    height,
+
+    // The axis' value, and whether it's explicit or the default
+    pub const State = struct {
+        value: f64,
+        explicit: bool = false,
+    };
 };
 
-pub fn getElementDimensions(self: *Element, frame: *Frame) Dimensions {
-    var dims: Dimensions = .{ .width = 5.0, .height = 5.0 };
-
+pub fn getElementAxis(self: *Element, frame: *Frame, comptime axis: Axis) Axis.State {
     if (self.getStyle(frame)) |style| {
         const decl = style.asCSSStyleDeclaration();
-        if (CSS.parseDimensionViewport(decl.getPropertyValue("width", frame), frame)) |w| {
-            dims.width = w;
-            dims.explicit_width = true;
-        }
-        if (CSS.parseDimensionViewport(decl.getPropertyValue("height", frame), frame)) |h| {
-            dims.height = h;
-            dims.explicit_height = true;
+        if (CSS.parseDimensionViewport(decl.getPropertyValue(@tagName(axis), frame), frame)) |v| {
+            return .{ .value = v, .explicit = true };
         }
     }
 
-    if (dims.width == 5.0 or dims.height == 5.0) {
-        const tag = self.getTag();
-
+    switch (self.getTag()) {
         // Root containers get large default size to contain descendant positions.
         // With calculateDocumentPosition using linear depth scaling (100px per level),
         // even very deep trees (100 levels) stay within 10,000px.
         // 100M pixels is plausible for very long documents.
-        if (tag == .html or tag == .body) {
-            if (dims.width == 5.0) dims.width = 1920.0;
-            if (dims.height == 5.0) dims.height = 100_000_000.0;
-        } else if (tag == .img or tag == .iframe) {
-            if (self.getAttributeSafe(comptime .wrap("width"))) |w| {
-                if (std.fmt.parseFloat(f64, w)) |parsed| {
-                    dims.width = parsed;
-                    dims.explicit_width = true;
+        .html, .body => return .{ .value = if (axis == .width) 1920.0 else 100_000_000.0 },
+        .img, .iframe => {
+            if (self.getAttributeSafe(comptime .wrap(@tagName(axis)))) |attr| {
+                if (std.fmt.parseFloat(f64, attr)) |parsed| {
+                    return .{ .value = parsed, .explicit = true };
                 } else |_| {}
             }
-            if (self.getAttributeSafe(comptime .wrap("height"))) |h| {
-                if (std.fmt.parseFloat(f64, h)) |parsed| {
-                    dims.height = parsed;
-                    dims.explicit_height = true;
-                } else |_| {}
-            }
-        }
+        },
+        else => {},
     }
 
-    return dims;
+    return .{ .value = 5.0 };
 }
 
 // We can't do this correctly without full styles and more rendering. We also
 // can't just ignore the children since some sites append nodes until a certain
 // width / height treshold is reached. If the size isn't explicit, we fallback
-// to contentWidth/contentHeight
+// to the content size.
 pub fn getClientWidth(self: *Element, frame: *Frame) f64 {
-    var visibility_cache: VisibilityCache = .{};
-    return self.getClientWidthWithCache(frame, &visibility_cache);
-}
-
-pub fn getClientWidthWithCache(self: *Element, frame: *Frame, visibility_cache: *VisibilityCache) f64 {
-    if (!self.checkVisibilityCached(visibility_cache, frame)) {
+    if (!self.checkVisibilityCached(null, frame)) {
         return 0.0;
     }
-
-    const dims = self.getElementDimensions(frame);
-
-    const tag = self.getTag();
-    if (tag == .html or tag == .body or dims.explicit_width) {
-        return dims.width;
-    }
-
-    return @max(dims.width, self.contentWidth(frame, visibility_cache));
+    return self.boxAxis(frame, .width);
 }
 
 pub fn getClientHeight(self: *Element, frame: *Frame) f64 {
-    var visibility_cache: VisibilityCache = .{};
-    return self.getClientHeightWithCache(frame, &visibility_cache);
-}
-
-pub fn getClientHeightWithCache(self: *Element, frame: *Frame, visibility_cache: *VisibilityCache) f64 {
-    if (!self.checkVisibilityCached(visibility_cache, frame)) {
+    if (!self.checkVisibilityCached(null, frame)) {
         return 0.0;
     }
+    return self.boxAxis(frame, .height);
+}
 
-    const dims = self.getElementDimensions(frame);
-
-    const tag = self.getTag();
-    if (tag == .html or tag == .body or dims.explicit_height) {
-        return dims.height;
+// Caller must have made sure self is visible.
+pub fn boxAxis(self: *Element, frame: *Frame, comptime axis: Axis) f64 {
+    const own = self.getElementAxis(frame, axis);
+    if (own.explicit) {
+        // an explicitly set value always wins
+        return own.value;
     }
 
-    return @max(dims.height, self.contentHeight(frame, visibility_cache));
+    const tag = self.getTag();
+    if (tag == .html or tag == .body) {
+        // html/body return their set value regardless of children.
+        return own.value;
+    }
+
+    return @max(own.value, self.contentAxis(frame, axis));
 }
 
 pub fn getBoundingClientRect(self: *Element, frame: *Frame) !*DOMRect {
@@ -1440,17 +1444,11 @@ pub fn boundingClientRectValues(self: *Element, frame: *Frame) DOMRect.Data {
 
 // Some cases need the bounding rect but have already done the visibility check.
 pub fn boundingClientRectValuesForVisible(self: *Element, frame: *Frame) DOMRect.Data {
-    const y = calculateDocumentPosition(self.asNode());
-    const dims = self.getElementDimensions(frame);
-
-    // Use sibling position for x coordinate to ensure siblings have different x values
-    const x = calculateSiblingPosition(self.asNode());
-
     return .{
-        .x = x,
-        .y = y,
-        .width = dims.width,
-        .height = dims.height,
+        .x = self.horizontalPosition(frame),
+        .y = calculateDocumentPosition(self.asNode()),
+        .width = self.boxAxis(frame, .width),
+        .height = self.boxAxis(frame, .height),
     };
 }
 
@@ -1507,12 +1505,11 @@ pub fn setScrollLeft(self: *Element, value: i32, frame: *Frame) !void {
 }
 
 pub fn getScrollHeight(self: *Element, frame: *Frame) f64 {
-    var visibility_cache: VisibilityCache = .{};
-    if (!self.checkVisibilityCached(&visibility_cache, frame)) {
+    if (!self.checkVisibilityCached(null, frame)) {
         return 0.0;
     }
 
-    const height = self.getElementDimensions(frame).height;
+    const height = self.getElementAxis(frame, .height).value;
 
     const tag = self.getTag();
     // As in getScrollWidth: the root containers carry artificial giant
@@ -1521,54 +1518,29 @@ pub fn getScrollHeight(self: *Element, frame: *Frame) f64 {
         return height;
     }
 
-    return @max(height, self.contentHeight(frame, &visibility_cache));
-}
-
-// The height of the direct child elements stacked vertically, the counterpart
-// of contentWidth.
-//
-// Note that the two assume contradictory arrangements — contentWidth lays the
-// children out in a row, this stacks them. That is deliberate. We can't detect
-// the real layout mode (see contentWidth), so each axis independently assumes
-// the arrangement that produces overflow. Together they bound the content
-// extent per axis rather than describing one coherent layout: reporting no
-// overflow when there is some is what wedges measure-then-mutate loops,
-// while the reverse merely over-reports.
-fn contentHeight(self: *Element, frame: *Frame, visibility_cache: *VisibilityCache) f64 {
-    var total: f64 = 0;
-
-    var child = self.asNode().firstChild();
-    while (child) |node| : (child = node.nextSibling()) {
-        if (node.is(Element)) |el| {
-            if (el.checkVisibilityCached(visibility_cache, frame)) {
-                total += el.getElementDimensions(frame).height;
-            }
-        }
-    }
-
-    return total;
+    return @max(height, self.contentAxis(frame, .height));
 }
 
 pub fn getScrollWidth(self: *Element, frame: *Frame) f64 {
-    var visibility_cache: VisibilityCache = .{};
-    if (!self.checkVisibilityCached(&visibility_cache, frame)) {
+    if (!self.checkVisibilityCached(null, frame)) {
         return 0.0;
     }
 
-    const width = self.getElementDimensions(frame).width;
+    const width = self.getElementAxis(frame, .width).value;
 
     const tag = self.getTag();
     // The root containers carry artificial giant defaults (1920 and
-    // 100_000_000, see getElementDimensions). Stacking their children on
+    // 100_000_000, see getElementAxis). Stacking their children on
     // top would inflate a value sites read to detect page overflow.
     if (tag == .html or tag == .body) {
         return width;
     }
 
-    return @max(width, self.contentWidth(frame, &visibility_cache));
+    return @max(width, self.contentAxis(frame, .width));
 }
 
-// The width of the direct child elements laid end to end on a single row.
+// One axis of the direct child elements' size: laid end to end on a single
+// row for the width, stacked for the height.
 //
 // The dummy layout engine has no line-breaking, and an element only overflows
 // horizontally when its children don't wrap (white-space:nowrap, a flex row, an
@@ -1578,30 +1550,30 @@ pub fn getScrollWidth(self: *Element, frame: *Frame) f64 {
 // rules for `display:none` and `visibility` alone.
 //
 // Only direct children are measured, never the whole subtree. This runs on
-// every scrollWidth read, and recursing would make an element's cost O(subtree)
-// rather than O(fan-out).
+// every size read, and recursing would make an element's cost O(subtree)
+// rather than O(fan-out). It also keeps an ancestor from growing in lockstep
+// with its descendants, so "append until the track outgrows its shell" still
+// crosses the threshold.
 //
 // Growing with the child count is the point: JS that appends content until
 // `scrollWidth` passes a threshold (the infinite-marquee idiom) never
 // terminates when the metric ignores what it just inserted.
 //
-// Text children are not measured, matching contentHeight. Estimating a text run
-// from its length would need a per-character advance, which in turn has to track
-// font-size or "shrink the font until it fits" loops stop converging — and it
-// would report overflow for practically every element containing text, since a
-// few words already exceed the default box. Element children are what content
-// grown by script actually consists of.
-fn contentWidth(self: *Element, frame: *Frame, visibility_cache: *VisibilityCache) f64 {
+// Text children are not measured. Estimating a text run from its length would
+// need a per-character advance, which in turn has to track font-size or
+// "shrink the font until it fits" loops stop converging — and it would report
+// overflow for practically every element containing text, since a few words
+// already exceed the default box. Element children are what content grown by
+// script actually consists of.
+fn contentAxis(self: *Element, frame: *Frame, comptime axis: Axis) f64 {
     var total: f64 = 0;
+    const style_manager = &self.ownerFrame(frame)._style_manager;
 
-    // The cache arrives seeded by the caller's own visibility walk, and
-    // siblings share that ancestor chain, so the loop costs one own-element
-    // check per child rather than N ancestor walks.
     var child = self.asNode().firstChild();
     while (child) |node| : (child = node.nextSibling()) {
         if (node.is(Element)) |el| {
-            if (el.checkVisibilityCached(visibility_cache, frame)) {
-                total += el.getElementDimensions(frame).width;
+            if (el.isVisibleSelf(style_manager)) {
+                total += el.getElementAxis(frame, axis).value;
             }
         }
     }
@@ -1610,19 +1582,11 @@ fn contentWidth(self: *Element, frame: *Frame, visibility_cache: *VisibilityCach
 }
 
 pub fn getOffsetHeight(self: *Element, frame: *Frame) f64 {
-    if (!self.checkVisibilityCached(null, frame)) {
-        return 0.0;
-    }
-    const dims = self.getElementDimensions(frame);
-    return dims.height;
+    return self.getClientHeight(frame);
 }
 
 pub fn getOffsetWidth(self: *Element, frame: *Frame) f64 {
-    if (!self.checkVisibilityCached(null, frame)) {
-        return 0.0;
-    }
-    const dims = self.getElementDimensions(frame);
-    return dims.width;
+    return self.getClientWidth(frame);
 }
 
 pub fn getOffsetTop(self: *Element, frame: *Frame) f64 {
@@ -1636,7 +1600,7 @@ pub fn getOffsetLeft(self: *Element, frame: *Frame) f64 {
     if (!self.checkVisibilityCached(null, frame)) {
         return 0.0;
     }
-    return calculateSiblingPosition(self.asNode());
+    return self.horizontalPosition(frame);
 }
 
 pub fn getOffsetParent(self: *Element, frame: *Frame) ?*Element {
@@ -1754,28 +1718,40 @@ fn countSubtreeNodes(node: *Node) f64 {
     return count;
 }
 
-// Calculates horizontal position using the same approach as y,
-// just scaled differently for visual distinction
-fn calculateSiblingPosition(node: *Node) f64 {
-    var position: f64 = 0.0;
-    var current = node;
+// The horizontal position follows the same single-row assumption as
+// contentAxis: an element sits to the right of the visible element
+// siblings before it.
+
+// translateX is commonly used to shift elements around, e.g. in a carousel to
+// shift things around. So we honor any transform: translateX inline styles.
+pub fn horizontalPosition(self: *Element, frame: *Frame) f64 {
+    var x: f64 = 0.0;
+    var current = self.asNode();
+    const style_manager = &self.ownerFrame(frame)._style_manager;
+
+    if (self.getStyle(frame)) |style| {
+        x += CSS.parseTranslateX(style.asCSSStyleDeclaration().getPropertyValue("transform", frame));
+    }
 
-    // Walk up to root, counting preceding nodes (same as y)
     while (current.parentNode()) |parent| {
-        // Count all previous siblings and their descendants
-        var sibling = parent.firstChild();
-        while (sibling) |s| {
-            if (s == current) break;
-            position += countSubtreeNodes(s);
-            sibling = s.nextSibling();
+        if (parent.is(Element)) |el| {
+            if (el.getStyle(frame)) |style| {
+                x += CSS.parseTranslateX(style.asCSSStyleDeclaration().getPropertyValue("transform", frame));
+            }
+        }
+        var sibling = parent.firstChild();
+        while (sibling) |s| : (sibling = s.nextSibling()) {
+            if (s == current) break;
+            if (s.is(Element)) |el| {
+                if (el.isVisibleSelf(style_manager)) {
+                    x += el.getElementAxis(frame, .width).value;
+                }
+            }
         }
-
-        // Count the parent itself
-        position += 1.0;
         current = parent;
     }
 
-    return position * 5.0; // 5px per node
+    return x;
 }
 
 pub fn getElementsByTagName(self: *Element, tag_name: []const u8, frame: *Frame) !Node.GetElementsByTagNameResult {
diff --git a/src/browser/webapi/ResizeObserver.zig b/src/browser/webapi/ResizeObserver.zig
index 026564696..260bf9c05 100644
--- a/src/browser/webapi/ResizeObserver.zig
+++ b/src/browser/webapi/ResizeObserver.zig
@@ -165,8 +165,10 @@ pub fn deliverEntries(self: *ResizeObserver, frame: *Frame) !void {
             if (!connected or !target.checkVisibilityCached(&visibility_cache, frame)) {
                 break :blk .{ 0, 0 };
             }
-            const dims = target.getElementDimensions(frame);
-            break :blk .{ dims.width, dims.height };
+            break :blk .{
+                target.getElementAxis(frame, .width).value,
+                target.getElementAxis(frame, .height).value,
+            };
         };
 
         if (width == obs.last_width and height == obs.last_height) {
diff --git a/src/browser/webapi/css/CSSStyleDeclaration.zig b/src/browser/webapi/css/CSSStyleDeclaration.zig
index c06e8ebbd..827613828 100644
--- a/src/browser/webapi/css/CSSStyleDeclaration.zig
+++ b/src/browser/webapi/css/CSSStyleDeclaration.zig
@@ -122,13 +122,12 @@ pub fn getPropertyValue(self: *const CSSStyleDeclaration, property_name: []const
 }
 
 fn resolvedDimension(element: *Element, dimension: enum { width, height }, frame: *Frame) []const u8 {
-    var visibility_cache: Element.VisibilityCache = .{};
-    if (!element.checkVisibilityCached(&visibility_cache, frame)) {
+    if (!element.checkVisibilityCached(null, frame)) {
         return "auto";
     }
     const value = switch (dimension) {
-        .width => element.getClientWidthWithCache(frame, &visibility_cache),
-        .height => element.getClientHeightWithCache(frame, &visibility_cache),
+        .width => element.boxAxis(frame, .width),
+        .height => element.boxAxis(frame, .height),
     };
     return std.fmt.allocPrint(frame.local_arena, "{d}px", .{value}) catch "auto";
 }
diff --git a/src/cdp/domains/dom.zig b/src/cdp/domains/dom.zig
index 99bb8260f..517390084 100644
--- a/src/cdp/domains/dom.zig
+++ b/src/cdp/domains/dom.zig
@@ -1156,7 +1156,7 @@ test "cdp.dom: getBoxModel" {
         .params = .{ .nodeId = 3 },
     });
     try ctx.expectSentResult(.{ .model = BoxModel{
-        .content = Quad{ 25.0, 25.0, 30.0, 25.0, 30.0, 30.0, 25.0, 30.0 },
+        .content = Quad{ 0.0, 25.0, 5.0, 25.0, 5.0, 30.0, 0.0, 30.0 },
         .padding = Quad{ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 },
         .border = Quad{ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 },
         .margin = Quad{ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 },