Skip to content

bug: scroll assist activates in playground iframes #3416

@chrissmejia

Description

@chrissmejia

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:
Screenshot 2024-01-13 at 11 58 52

With focus:
Screenshot 2024-01-13 at 11 59 01

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.

Activity

changed the title [-]bug: Ghost keyboard on emulated Chrome device[/-] [+]bug: Ghost keyboard on Android and emulated Chrome device[/+] on Jan 14, 2024
chrissmejia

chrissmejia commented on Jan 14, 2024

@chrissmejia
Author

For anyone looking for a hack:

App.vue

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

liamdebeasi commented on Jan 30, 2024

@liamdebeasi
Contributor

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.

changed the title [-]bug: Ghost keyboard on Android and emulated Chrome device[/-] [+]bug: scroll assist activates in playground iframes[/+] on Jan 30, 2024
added
bugIssues related to bugs on the documentation website
on Jan 30, 2024
chrissmejia

chrissmejia commented on Jan 31, 2024

@chrissmejia
Author

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

liamdebeasi

liamdebeasi commented on Jan 31, 2024

@liamdebeasi
Contributor

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.

chrissmejia

chrissmejia commented on Jan 31, 2024

@chrissmejia
Author

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.

liamdebeasi

liamdebeasi commented on Jan 31, 2024

@liamdebeasi
Contributor

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.

chrissmejia

chrissmejia commented on Jan 31, 2024

@chrissmejia
Author

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?

liamdebeasi

liamdebeasi commented on Feb 6, 2024

@liamdebeasi
Contributor

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)

chrissmejia

chrissmejia commented on Feb 6, 2024

@chrissmejia
Author

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

vochitan90

vochitan90 commented on Apr 2, 2025

@vochitan90

Any update?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssues related to bugs on the documentation website

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @liamdebeasi@chrissmejia@vochitan90

        Issue actions

          bug: scroll assist activates in playground iframes · Issue #3416 · ionic-team/ionic-docs