[BUG] inputfield in a modal shifts position when scrolling (iOS)

alxzak commented 1 year ago

[x] I have written a good issue

Describe the bug

The input field shifts position when you scroll inside a modal on iOS.

Describe how to reproduce the bug

Open an app with Kirby on an iOS device
Go to a screen with a modal that includes an input field
Tap an input field to activate it (i.e. it has the cursor shown inside)
Scroll up or down and see the active input "jumps"/shifts position while scrolling (as in the video below 👇🏻 )

Which Kirby version was used?

8.8.0

What was the expected behavior?

Active input field shouldn't scroll.

Add any screenshots

https://user-images.githubusercontent.com/78357155/205633074-bdad0649-0877-4a9f-8467-6ea2577d3634.MP4

Please complete the following information:

OS: iOS

Are there any additional context?

Contact: Nikolaj Skousen / Jonas Skov

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

[ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done

Implementation

The contributor who wants to implement this issue should:

[ ] Make sure you have read: "Before you get coding".
[ ] Signal to others you are working on the issue by assigning yourself.
[ ] Create a branch from the develop branch following our branch naming convention.
[ ] Create a test that reproduces the bug following guidelines in: "The good: Test".
[ ] Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

[ ] Do a self-review.
[ ] Create a pull-request.

mictro commented 1 year ago

Reported behaviour was not reproducable in the kirby flows app but has been verified in ralationsbank 1.1.1 with kirby 7.4.0.

Perhaps not relevant, but In relationsbank 1.1.1 it was observed that removing the affix-container class on the input field made the problem disappear.

RasmusKjeldgaard commented 1 year ago

Reported behaviour was not reproducable in the kirby flows app but has been verified in ralationsbank 1.1.1 with kirby 7.4.0.

Perhaps not relevant, but In relationsbank 1.1.1 it was observed that removing the affix-container class on the input field made the problem disappear.

I was able to reproduce this in our flows app, and it turns out it is not related to modals only. It seems to happen when the keyboard pushes the form field up on the page - so , it starts lagging and the form-field position shifts.

This branch has the necessary flows update, and it can be reproduced on either a physical or emulated device when running npm run start:flows:android and scrolling just a little bit down on the page before clicking the form-field.

shifting-input-on-keyboard.webm

kirbydesign / designsystem