bug: on android phone, click at middle height of a contenteditable div, the div will overflow / cover the header/toolbar

[creatxrgithub]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

with the code below, compile and install on a android phone. then click at the middle of the div content. the toolbar will disappear and cannot come back even if the div blured.

<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-item :style="{ overflowX: 'scroll!importantU+0003B' }">
                    <ion-button>aaa</ion-button>
                    <ion-button>aaa</ion-button>
                    <ion-button>aaa</ion-button>
                    <ion-button>aaa</ion-button>
                    <ion-button>aaa</ion-button>
                </ion-item>
            </ion-toolbar>
        </ion-header>
        <ion-content :fullscreen="true">
            <ion-list>
                <ion-item>
                    <div id="testDiv" contenteditable
                    v-html="text">
                    </div>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonList, IonItem } from '@ionic/vue';

let testStr = 'color test '.repeat(200);

export default defineComponent({
    name: 'Tab2Page',
    components: { IonHeader, IonToolbar, IonContent, IonPage, IonButton, IonList, IonItem },

    data() {
        return {
            text: testStr
        }
    }
});
</script>

Expected Behavior

keep the toolbar while editing.

Steps to Reproduce

use that code above: a ion-toolbar in the ion-header, a content editable div in the ion-content preset enough long text in the div compile and install in a android phone visit the tab click at the middle of the div

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.5 (/home/creatxr/.nvm/versions/node/v20.10.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.4.1

Capacitor:

Capacitor CLI : 4.6.1 @capacitor/android : 4.6.1 @capacitor/core : 4.6.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run (update available: 2.0.0) : 1.7.1

System:

NodeJS : v20.10.0 (/home/creatxr/.nvm/versions/node/v20.10.0/bin/node) npm : 10.2.3 OS : Linux 6.2

Additional Information

No response

[creatxrgithub]

i also tried with ion-textarea or textarea, it has the same issue on android phone.

[creatxrgithub]

in browser with "ionic serve -w firefox"

if paste enough long text in it, it will cause the same issue.

but, if

1) delete the text 2) use ESC key to blur 3) paste again text 4) delete the text again

now the toolbar come back.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[creatxrgithub]

reproduction with issue (before upgrade):

https://github.com/creatxrgithub/issue-div-over-toolbar/tree/main

it seems that the issue has been resolved after upgrade.

this issue may to be closed.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.