UI Integrity

Prevent visual integration bugs, including unintended overlap; z-index or stacking-context conflicts; clipping and overflow; broken absolute, fixed, or sticky positioning; layout shifts; scroll and animation collisions; extension UI interfering with native website UI; invisible elements blocking clicks; duplicate injected components; and responsive-layout breakage.

Approach

When changing UI:

1. Identify the component's intended spatial owner and positioning context.
2. Inspect nearby native and custom UI for possible collisions.
3. Test default, hover, expanded, animated, scrolled, and resized states.
4. Check bounding boxes, overflow, stacking contexts, and pointer events when something looks wrong.
5. Fix the underlying layout relationship instead of masking it with arbitrary offsets or huge z-index values.
6. Re-test the changed component and surrounding UI.

Browser extension rules

When injecting UI into another website: