Inspect the working example
The first 100×30 paragraph moves visually 40px right. Its normal layout allocation remains 100×30, so the next paragraph begins beneath that original slot.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Visual movement | Measured left minus layout offset | 40px |
| Next-row x | Compare next and original layout left | No40px shift |
| Next-row y | Inspect allocation height | Starts after first normal-flow height,30px at base text size |
Follow the browser mechanism
Transforms change rendered coordinates without reallocating the normal flow slot. getBoundingClientRect includes the transform; layout offsets can expose the untransformed position. Minimum height permits enlarged text to grow, so vertical spacing must be measured rather than assumed fixed at30 after enlargement.
A layout margin also moves the allocation
The alternative uses margin-left 40px instead of a transform.
<style>body{margin:8px}</style>
<style>.first,.next{width:100px;min-height:30px;margin:0}.first{margin-left:40px;background:#e3efe8}.next{background:#d9dce8}</style><p class="first">Source</p><p class="next">Next row</p>The first layout offset itself moves 40px; there is no transform delta between its layout and visual positions.
Try the repair
Which measurement includes the 40px transform: the visual bounding rectangle or the original flow offset?
Show the worked answer
The visual bounding rectangle includes it. Compare against layout offsets to distinguish movement types.
- Record offsets and transformed rectangles separately.
- Allow text growth rather than clipping it to a fixed 30px height.