Domotion

Transforms

translate works; rotate / scale / skew currently render as bounding box.

This is currently the largest fidelity gap in Domotion. Only translation round-trips faithfully — every other CSS transform is captured but rendered as the un-transformed axis-aligned bounding box of the element.

What works

  • transform: translate(x, y), translateX, translateY, the 2D component of translate3d — the bounding box absorbs the translation, so the element renders at its visually-translated position. (Domotion captures the resolved getBoundingClientRect, which Chromium has already moved.)

What doesn't

  • rotate — renders as the element's axis-aligned bounding box at the rotated position. Visually wrong for any non-trivial rotation. Warning logged.
  • scale — renders as the post-scale bounding box, but inner content is captured at original size, so proportions look wrong.
  • skew and matrix — same as rotate.
  • 3D transforms (perspective, rotate3d, etc.) — out of scope; degraded to the underlying 2D component (which is itself unsupported).

Workarounds

If your demo needs a rotated or scaled element today:

  1. Pre-bake the rotation into your HTML. Use an SVG icon rotated in its own coordinates rather than a CSS-rotated DOM element. SVG content under <svg> elements is passed through verbatim.
  2. Capture the post-transform layout from a screenshot. Use Playwright's page.screenshot({ clip }) on the element and embed the PNG as an <image>. You lose vector fidelity but the visual is correct.
  3. Author rotation in SVG markup directly. If the rotated region is small (an icon, a badge), inline the SVG markup in the HTML and let it pass through.

Why this is hard

Rotated text isn't just "draw the same characters at an angle" — Chromium hints glyphs differently when their baseline isn't axis-aligned, the sub-pixel positioning rules change, and decoration metrics shift. Faithfully reproducing a rotated text run in SVG requires either applying a matched transform on the path elements (loses hinting parity) or rasterizing the rotated region (loses vector benefits). Both paths are on the roadmap; neither is shipped yet.

Translation, by contrast, doesn't change glyph orientation — Chromium's rendering is the same as if the box were positioned absolutely, which the captured bounding box already absorbs.

See also

  • docs/06-css-transforms.md in the repo for the design notes on what a full transform implementation will look like.