Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

On-screen keyboard opening on iOS shifts floating element partially out of view #3362

Open
Labels
browser bugThis bug is related to an upstream software (usually the browser) and can't usually get fixed by us.
@mihkeleidast

Description

@mihkeleidast

Describe the bug

I have a floating element that has its height limited viasize middleware. The floating element also has overflow, and has a form inside of it.

On iOS Safari, when the floating element is open and user focuses the input in the form, the on-screen keyboard triggers scroll and resize of the visual viewport. Available height fromsize middleware is adjusted properly, but the scroll change is not taken into account for the general floating element position.

To Reproduce

Steps to reproduce the behavior:https://codesandbox.io/p/devbox/gallant-mountain-rk2vw6?workspaceId=ws_R2q9KUfHSa53dxJt6vpPTF

I'm testing this on Browserstack myself, iPhone 15 with Safari 17.

  1. Go tohttps://rk2vw6.csb.app/
  2. Click on 'My trigger' to open the popover
  3. Scroll down in the popover until the input element is visible (should be at the bottom of popover so keyboard would trigger scroll):
Image
  1. Click on the input to focus it
  2. Observe that floating element height is adjusted, but due to Safari also scrolling the viewport (it tries to center the input at the middle point of visual viewport I think), the floating element does not fill the entire visual viewport height, nor is the input actually visible anymore.
Image

Expected behavior

The floating element should still fill the entire available height of the visual viewport, even if the visual viewport is scrolled because of the on-screen keyboard.

Not sure whether we can override the Safari autoscroll behavior (scroll visual viewport back to top?), or we'd need to actually adjust the position and/or height.

Screenshots

See above.

Context:

  • OS: iOS
  • Browser: Safari 17

Additional context

In some cases, the input will remain visible in the scrollable floating element, but the floating element itself is still shifted away. If the floating element has outside click closing enabled (which most do I think), it's quite cumbersome for users to manually scroll back to the "correct" position, especially if such scrollable floating element also has e.g.overscroll-behavior: contain; defined.

Metadata

Metadata

Assignees

No one assigned

    Labels

    browser bugThis bug is related to an upstream software (usually the browser) and can't usually get fixed by us.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions


      [8]ページ先頭

      ©2009-2025 Movatter.jp