Skip to content

dogfood: all tier-2 ui components dead on iOS (slot hydration); tap does nothing #730

Description

@vivek7405

On iOS Safari/WebKit (all iOS browsers), every Tier-2 @webjsdev/ui component (dialog, alert-dialog, tabs, tooltip, hover-card, dropdown-menu, toggle, toggle-group, sonner) is non-interactive: tapping a trigger does ABSOLUTELY NOTHING. Reproduced on the live ui.webjs.dev. The theme-toggle (a custom element with NO slot, imports only @webjsdev/core) works, so core hydration + customElements.define are fine on iOS.

The lone structural difference: Tier-2 use webjs light-DOM <slot> projection (@webjsdev/core/src/slot.js, which monkey-patches HTMLSlotElement.prototype.assignedNodes/assignedElements + drives a MutationObserver). Hypothesis: that hydration path throws on WebKit, so the slot-using component never finishes hydrating and its @click listener is never attached. Chromium (even with iPhone UA + touch emulation) does NOT reproduce, so it is WebKit-engine-specific and must be diagnosed/verified on a real iOS device.

Also latent: packages/ui/packages/registry/components/popover.ts:186 claims 'CSS anchor positioning is universally available', which is FALSE on iOS Safari (overlay positioning for tooltip/hover-card/dropdown).

Diagnosis approach: a temporary /diag route on the live ui site reports upgrade/registration/error/feature-support, read on-device. Then fix slot.js (+ popover.ts) and re-verify on the same route.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type
No fields configured for issues without a type.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions