bug: scroll assist activates in playground iframes

[Chriss Mejía]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Content is pushed up on input focus on emulated chrome device

UPDATE: It happens on Android too, the extra space is also present when the Android native keyboard is pushed up

Expected Behavior

Don't move

Steps to Reproduce

If you go to the oficial documentation and turn on the device toolbar and focus an input, the content is pushed up

Without focus:

With focus:

Code Reproduction URL

https://ionicframework.com/docs/api/input

Ionic Info

Same as in the docs, I'm personally having the same issue on "@ionic/vue": "^7.6.3",

Additional Information

I'm migrating from 6.x to 7.x, 6.x was fine.

[Chriss Mejía]

For anyone looking for a hack:

App.vue

<style lang="scss">
    ion-content {
       --keyboard-offset: 0px !important;
    }
</style>

[Liam DeBeasi]

Thanks! I am going to transfer this to the docs repo. We have a scroll assist utility that scrolls content to prevent inputs from being hidden by the keyboard. However, we should probably disable this in the iframe demos on the docs.

[Chriss Mejía]

Thanks! I am going to transfer this to the docs repo. We have a scroll assist utility that scrolls content to prevent inputs from being hidden by the keyboard. However, we should probably disable this in the iframe demos on the docs.

Thanks a lot for your support, can you please tell me how to disable that for my app? Because it's happening since we migrated from 6.x to 7.x

[Liam DeBeasi]

You can set scrollAssist: false in your IonicConfig. However, I don't recommend doing that because then text inputs may be hidden by the keyboard.

[Chriss Mejía]

You can set scrollAssist: false in your IonicConfig. However, I don't recommend doing that because then text inputs may be hidden by the keyboard.

Thanks a lot for the feedback, I understand but I still have a bug in the system. if I remove

<style lang="scss">
    ion-content {
       --keyboard-offset: 0px !important;
    }
</style>

I get the UI jumping with empty space even in Android that it's a terrible experience, same than in the docs, something changed between 6.x and 7.x in this sense? because it was working well, I need guidance to fix the issue.

Aside that, how is this supposed to work? it should jump also in the browser? because it does, you can see it in the docs.

[Liam DeBeasi]

Do you have a screen recording I can look at?

Scroll assist scrolls the ion-content such that inputs are visible above the keyboard. When running the app in a browser we currently don't have a great way of knowing how tall the keyboard is, so we need to estimate it. As a result, inputs in the browser may get scrolled a bit more than they need to.

In some scenarios where the webview/browser viewport does not resize when the keyboard opens we need to add padding to the bottom of ion-content so inputs near the bottom can be scrolled above the keyboard.

[Chriss Mejía]

Sure, thank you so much for the context, my goal with your help is to debug it and fix it, so I'm here for anything you require.

Screen.Recording.2024-01-31.at.13.47.54.mov

In real life I want the complete view moving up if require to show the keyboard no just padding in the bottom, is that posible?

[Liam DeBeasi]

In real life I want the complete view moving up if require to show the keyboard no just padding in the bottom, is that posible?

Yes, but that would be something the developer is responsible for. You'd want to listen for the keyboard open/close events and transform the container as shown in this demo: https://ionic.io/blog/keyboard-improvements-for-ionic-apps (in the Ionic Keyboard Events section)

[Chriss Mejía]

Awesome you are the best, thanks a lot, trying.