[Bug]: Overlay is raised too high on the screen when keyboard is open for tablet device

[yogeshapps]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-overlay, sp-popover

Expected behavior

The panel should remain visible to the user and reposition itself based on trigger element position.

Actual behavior

When keyboard is open, overlay is raised too high and user is unable to use the panel

Screenshots

Overlay.Out.of.Viewport.Issue.mov

What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories in iPad. I used iPad Air.
2. Click on Click on Button Popover
3. Click on Example Textfield
4. Popover is closed on open of soft keyboard of iPad.

Sample code or abstract reproduction which illustrates the problem

https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories
Created a story of the sample code.

No response

Severity

SEV 1

Logs taken while reproducing problem

No response

[TarunAdobe]

Hey @yogeshapps can you create a reproduction of this here so that we can triage it better.

[Rajdeepc]

Hi @yogeshapps Just a friendly reminder: before we begin investigating reported issues, it's essential that the bug reporter follows the bug reporting guidelines. The current ticket is missing important details like repro steps and device diagnostics, which are crucial for efficient triage. Appreciate everyone's effort in keeping the process smooth and efficient!

[yogeshapps]

Hi @Rajdeepc I have created a story https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories and added steps around this.