fix(picker): scrolling issue inside overlays in Safari iPad #5868

Rajdeepc · 2025-11-10T08:06:18Z

Description

Picker menus inside overlays on Safari/iOS couldn't scroll to the bottom after selecting an item and reopening. The menu would appear truncated (90px height instead of the full 947px), making lower items inaccessible.

Root cause

A timing issue in PlacementController: the overlay's height measurement occurred before the menu's scrollIntoView operation completed. Safari's layout engine needed an additional frame to fully render the menu after scroll repositioning, but computePlacement() was measuring prematurely, capturing the collapsed/transitional state rather than the final rendered height.

Fix

Added a 1-frame requestAnimationFrame delay in PlacementController.computePlacement() specifically for:

Safari/WebKit browsers (detected via user agent)
Overlays containing sp-menu elements
Excludes submenus (which need immediate positioning for hover responsiveness)

This allows Safari's layout engine to complete scrollIntoView and stabilize the menu's rendered height before the overlay calculates positioning and applies size constraints.

Why Safari-specific

Chrome's layout engine completes scrollIntoView synchronously within the same frame, while Safari/WebKit requires an additional frame for the layout to settle. This is a known Safari rendering behavior, not a bug.

Solution

PlacementController Timing Fix (`PlacementController.ts`)

Adds a 1-frame delay in PlacementController for Safari browsers when rendering picker menus inside overlays, allowing scrollIntoView to complete before height measurement. Excludes submenus to maintain hover responsiveness.

async computePlacement(): Promise<void> {
    const { options, target } = this;
    
    await (document.fonts ? document.fonts.ready : Promise.resolve());
    
    // NEW: Wait for content to fully render and settle
     //Safari/iOS-specific fix: Add small delay for picker menus to allow scrollIntoView to complete
        const isSafari =
            /WebKit/.test(navigator.userAgent) &&
            !/Chrome/.test(navigator.userAgent);

        // Check if this is a submenu overlay (slot="submenu")
        // Submenus need immediate positioning for hover responsiveness
        const isSubmenu = Array.from(this.host.elements).some(
            (el) => el.getAttribute?.('slot') === 'submenu'
        );

        if (isSafari && !isSubmenu) {
            const hasMenu = Array.from(this.host.elements).some(
                (el) =>
                    el.tagName === 'SP-MENU' || el.querySelector?.('sp-menu')
            );

            if (hasMenu) {
                // Wait 1 frame for Safari layout to settle after scrollIntoView
                await new Promise((resolve) => requestAnimationFrame(resolve));
            }
        }
}

Motivation and context

Users cannot access all menu items after the first selection
Affects pickers in modal dialogs, popovers, and other overlay contexts
Reproducible in Safari (desktop and iPad) ⚠️
Chrome works correctly (but fix is still needed for consistency)

Related issue(s)

fixes [SWC-1334]
fixes [Bug]: Scrolling picker inside of another overlay closes it on touch devices #5715

Screenshots (if appropriate)

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Descriptive Test Statement
1. Go here
2. Open this in iPad
3. Click on Open Overlay button
4. Scroll and select any item
5. close and open again and scroll
Descriptive Test Statement
1. Go here
2. Do this action
3. Expect this result

Breaking Changes

None. This is a bug fix with no API changes.

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

changeset-bot · 2025-11-10T08:06:22Z

🦋 Changeset detected

Latest commit: edd1dda

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 78 packages

Name	Type
@spectrum-web-components/overlay	Patch
@spectrum-web-components/picker	Patch
@spectrum-web-components/combobox	Patch
@spectrum-web-components/contextual-help	Patch
@spectrum-web-components/menu	Patch
@spectrum-web-components/popover	Patch
@spectrum-web-components/tooltip	Patch
@spectrum-web-components/bundle	Patch
@spectrum-web-components/truncated	Patch
@spectrum-web-components/action-menu	Patch
@spectrum-web-components/breadcrumbs	Patch
@spectrum-web-components/action-bar	Patch
@spectrum-web-components/card	Patch
@spectrum-web-components/accordion	Patch
@spectrum-web-components/action-button	Patch
@spectrum-web-components/action-group	Patch
@spectrum-web-components/alert-banner	Patch
@spectrum-web-components/alert-dialog	Patch
@spectrum-web-components/asset	Patch
@spectrum-web-components/avatar	Patch
@spectrum-web-components/badge	Patch
@spectrum-web-components/button-group	Patch
@spectrum-web-components/button	Patch
@spectrum-web-components/checkbox	Patch
@spectrum-web-components/clear-button	Patch
@spectrum-web-components/close-button	Patch
@spectrum-web-components/coachmark	Patch
@spectrum-web-components/color-area	Patch
@spectrum-web-components/color-field	Patch
@spectrum-web-components/color-handle	Patch
@spectrum-web-components/color-loupe	Patch
@spectrum-web-components/color-slider	Patch
@spectrum-web-components/color-wheel	Patch
@spectrum-web-components/dialog	Patch
@spectrum-web-components/divider	Patch
@spectrum-web-components/dropzone	Patch
@spectrum-web-components/field-group	Patch
@spectrum-web-components/field-label	Patch
@spectrum-web-components/help-text	Patch
@spectrum-web-components/icon	Patch
@spectrum-web-components/icons-ui	Patch
@spectrum-web-components/icons-workflow	Patch
@spectrum-web-components/icons	Patch
@spectrum-web-components/iconset	Patch
@spectrum-web-components/illustrated-message	Patch
@spectrum-web-components/infield-button	Patch
@spectrum-web-components/link	Patch
@spectrum-web-components/meter	Patch
@spectrum-web-components/modal	Patch
@spectrum-web-components/number-field	Patch
@spectrum-web-components/picker-button	Patch
@spectrum-web-components/progress-bar	Patch
@spectrum-web-components/progress-circle	Patch
@spectrum-web-components/radio	Patch
@spectrum-web-components/search	Patch
@spectrum-web-components/sidenav	Patch
@spectrum-web-components/slider	Patch
@spectrum-web-components/split-view	Patch
@spectrum-web-components/status-light	Patch
@spectrum-web-components/swatch	Patch
@spectrum-web-components/switch	Patch
@spectrum-web-components/table	Patch
@spectrum-web-components/tabs	Patch
@spectrum-web-components/tags	Patch
@spectrum-web-components/textfield	Patch
@spectrum-web-components/thumbnail	Patch
@spectrum-web-components/toast	Patch
@spectrum-web-components/top-nav	Patch
@spectrum-web-components/tray	Patch
@spectrum-web-components/underlay	Patch
@spectrum-web-components/base	Patch
@spectrum-web-components/grid	Patch
@spectrum-web-components/opacity-checkerboard	Patch
@spectrum-web-components/reactive-controllers	Patch
@spectrum-web-components/shared	Patch
@spectrum-web-components/styles	Patch
@spectrum-web-components/theme	Patch
@spectrum-web-components/eslint-plugin	Patch

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

github-actions · 2025-11-10T08:08:31Z

📚 Branch Preview

🔍 Visual Regression Test Results

When 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: pr-5868

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

…spectrum-web-components into rajdeep/ipad-scroll-issue

Rajdeepc · 2025-11-11T06:45:50Z

trim.2B4F5229-CADA-4597-9650-51F00C5F7E89.MOV

Rajdeep Chandra added 2 commits November 10, 2025 11:47

fix(picker): ipad scroll issue fix

83a0176

fix(picker): story

2b2214a

Rajdeepc changed the title ~~Rajdeep/ipad scroll issue~~ fix(overlay): Picker menu scrolling issue inside overlays Nov 10, 2025

Rajdeep Chandra and others added 12 commits November 10, 2025 16:32

fix: reset changes in Menu and Picker used for testing

38f899f

chore: added changeset

9d6ebc4

Merge branch 'main' into rajdeep/ipad-scroll-issue

3047c17

chore: added two frame delay in test

0f5615f

Merge branch 'rajdeep/ipad-scroll-issue' of https://github.com/adobe/…

edd013b

…spectrum-web-components into rajdeep/ipad-scroll-issue

chore: added dev mdoe story

65f9ba0

chore: updated double delay frame to exclude submenu

deee98f

chore: updated double delay frame to exclude submenu

f117115

chore: revert menu

18de5af

chore: revert async timing fix

32dbe21

chore: revert menu

5697276

fix: safari scroll binding issue with extra frame

edd1dda

Rajdeepc self-assigned this Nov 10, 2025

Rajdeepc changed the title ~~fix(overlay): Picker menu scrolling issue inside overlays~~ fix(overlay): Picker menu scrolling issue inside overlays in Safari iPad Nov 11, 2025

Rajdeepc changed the title ~~fix(overlay): Picker menu scrolling issue inside overlays in Safari iPad~~ fix(picker): scrolling issue inside overlays in Safari iPad Nov 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(picker): scrolling issue inside overlays in Safari iPad #5868

fix(picker): scrolling issue inside overlays in Safari iPad #5868

Rajdeepc commented Nov 10, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

Rajdeepc commented Nov 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix(picker): scrolling issue inside overlays in Safari iPad #5868

Are you sure you want to change the base?

fix(picker): scrolling issue inside overlays in Safari iPad #5868

Conversation

Rajdeepc commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Root cause

Fix

Why Safari-specific

Solution

PlacementController Timing Fix (PlacementController.ts)

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Breaking Changes

Device review

Uh oh!

changeset-bot bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview

🔍 Visual Regression Test Results

Uh oh!

Rajdeepc commented Nov 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Rajdeepc commented Nov 10, 2025 •

edited

Loading

PlacementController Timing Fix (`PlacementController.ts`)

changeset-bot bot commented Nov 10, 2025 •

edited

Loading

github-actions bot commented Nov 10, 2025 •

edited

Loading