The Fragility of Pixel Offsets
Traditional review platforms record comments as static (x, y) pixel coordinates from the top-left corner of the page. This approach breaks under common web conditions:
- Responsive Layouts: On a laptop vs. wide monitor, elements reflow and static pins float in empty space.
- Dynamic Content: As marketing banners expand or customer data renders, content shifts downward, leaving comments detached.
- Code Deployments: A developer adds a new section, and all previous feedback points to the wrong components.
Element-Anchored DOM Fingerprinting
UIDesigner solves pin detachment by anchoring comments directly to HTML DOM elements. When you click an element in Comment Mode, the engine records comprehensive anchor evidence:
- Unique CSS Selector: A robust, prioritized selector path identifying the element.
- Tag Name & XPath Hierarchy: Structural parent chain from
down to the target node. - Fractional Click Offset: The exact relative position of your pin inside the element bounding box (e.g.,
x: 0.85, y: 0.50represents the right edge of a button). - Text Neighborhood: Surrounding text content to verify identity even if IDs or classes change.
Automatic Re-Anchoring
When you load an updated version of your website or resize the canvas:
- The injected review runtime searches the live DOM to re-locate the target element.
- If the element moved 300 pixels down due to an added hero banner, the pin automatically tracks down with it.
- The pin snaps back to the exact fractional location within the element.