fix(overlay): popover tooltip renders in ioswebkit#6194
fix(overlay): popover tooltip renders in ioswebkit#6194
Conversation
📚 Branch Preview Links🔍 First Generation Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
rubencarvalho
left a comment
rubencarvalho
left a comment
There was a problem hiding this comment.
Looks good! I have two nits, which prob are not blocking! 😄
| // drift away from its trigger on iOS WebKit until the next resize. | ||
| // See `computePlacement` for the corresponding offset compensation. | ||
| const visualViewport = window.visualViewport; | ||
| if (visualViewport && isWebKit()) { |
There was a problem hiding this comment.
Doesn't this match all webkit? i.e. Safari Desktop too?
There was a problem hiding this comment.
isWebKit() is intentionally broad here because the top-layer / popover-API rendering paints relative to visualViewport on all WebKit, so desktop Safari has the same bug under pinch-zoom. I've updated the inline comment to drop the "iOS" framing so the gate's intent is clearer.
| // See `computePlacement` for the corresponding offset compensation. | ||
| const visualViewport = window.visualViewport; | ||
| if (visualViewport && isWebKit()) { | ||
| visualViewport.addEventListener('resize', this.updatePlacement); |
There was a problem hiding this comment.
Should we be a bit more conservative here? Can you test and see how it feels with or without this being passive + maybe wrapping the handler in a raf?
There was a problem hiding this comment.
Both are good calls. Listeners are now { passive: true } (we never preventDefault in updatePlacement) and the handler is rAF-coalesced so a burst of resize/scroll during a URL-bar collapse or pinch gesture compresses to one Floating UI compute per frame. Felt smoother in the iOS Simulator on the repro story; no behavior change on desktop.
Rajdeepc
added
bug
🦋 Changeset detectedLatest commit: 3ecf315 The changes in this PR will be included in the next version bump. This PR includes changesets to release 83 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
2 participants
Description
On iOS Safari and WKWebView hosts (such as the Adobe Express iOS app),
sp-popoveropened viaOverlay.open()or thetriggerLit directive landsvisualViewport.offsetToppixels below its trigger — typically 30–40 px — whenever the layout viewport diverges from the visual viewport (URL bar showing, pinch-zoom, virtual keyboard open, host-app bottom sheet).This PR fixes the offset and keeps the overlay anchored as the viewports realign.
What changed
PlacementController.computePlacement— on WebKit, subtractvisualViewport.offsetLeft / offsetTopfrom the computed translate before applying it. Floating UI calculates(x, y)fromgetBoundingClientRect()(layout viewport) but the overlay paints in the top layer relative to the visual viewport; this closes the gap.PlacementController.placeOverlay— on WebKit, subscribe towindow.visualViewportresizeandscroll, and recompute placement on each event, so an open overlay re-anchors when the URL bar shows/hides, the keyboard opens, etc. Floating UI'sautoUpdatedoes not observevisualViewport. Listeners are torn down on close.isWebKit()so Chromium and Firefox are unaffected.visualViewporttelemetry for on-device verification.visualViewportresizeandscrolllisteners are attached on open and removed on close.patchto@spectrum-web-components/overlay).Motivation and context
Reported by Adobe Express iOS engineering: popovers anchored to toolbar buttons render below their triggers in the iOS app. The bug reproduces in plain iOS Safari any time the URL bar is visible and disappears when the page is scrolled enough that the URL bar collapses. Root cause is a coordinate-system mismatch between Floating UI's layout-viewport input and the top layer's visual-viewport rendering on iOS WebKit.
Related issue(s)
Screenshots (if appropriate)
iOS Popover Positioningstory after the fixAuthor's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
visualViewport.offsetTop > 0in the telemetry panel).Device review
Accessibility testing checklist
main; re-anchoring fires onlysp-update-overlaysand does not announce.