bug: iOS modal content flickers when keyboard appears

[a-furuichi-mec2]

trafficstars

Ionic version:

[ ] 4.x [ ] 5.x [x] 7.x

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior:

When using modals on iOS devices, the following issues occur:

1. When focusing on a text input field within a modal, the modal content flickers as the keyboard appears.
2. This flickering continues during the keyboard animation (less than a second) and makes the modal content appear to bounce up and down.
3. The issue consistently reproduces and occurs in all modals throughout the app.
4. While the modal content stabilizes after the keyboard is fully displayed, the initial visual disturbance negatively impacts the user experience.
5. This phenomenon may deteriorate the perceived stability and performance of the app, potentially causing user discomfort.

https://github.com/user-attachments/assets/78bc4ad0-ae36-4935-8f31-5e596e4d24a0

Expected behavior:

When the keyboard appears, the modal content should remain stable and smoothly position itself above the keyboard. Users should be able to start text input seamlessly without any visual disturbance or discomfort.

Steps to reproduce:

1. Open the app on an iOS device.
2. Navigate to any screen with a modal-opening action.
3. Open the modal.
4. Tap on a text input field within the modal.
5. Observe the modal content as the keyboard appears.

Related code:

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[moerphie]

Might be related to #29651

[a-furuichi-mec2]

Title: iOS Modal Flickering Issue: Potential Cause and Solution

Hello,

I've been investigating the flickering issue that occurs when opening modals on iOS, particularly when the keyboard is involved. I believe I may have identified a potential cause and would like to propose a solution.

Current Implementation

The relevant code is in core/src/utils/keyboard/keyboard.ts:

const fireKeyboardOpenEvent = (win: Window, nativeEv?: any): void => {
  const keyboardHeight = nativeEv ? nativeEv.keyboardHeight : win.innerHeight - currentVisualViewport.height;
  const ev = new CustomEvent(KEYBOARD_DID_OPEN, {
    detail: { keyboardHeight },
  });

  win.dispatchEvent(ev);
};

Proposed Solution

To address this issue, I suggest waiting for the keyboard animation to complete before firing the event. We could introduce a KEYBOARD_ANIMATION_DURATION constant and use setTimeout to delay the event dispatch:

const KEYBOARD_ANIMATION_DURATION = 300; // milliseconds

const fireKeyboardOpenEvent = (win: Window, nativeEv?: any): void => {
  const keyboardHeight = nativeEv ? nativeEv.keyboardHeight : win.innerHeight - currentVisualViewport.height;
  
  setTimeout(() => {
    const ev = new CustomEvent(KEYBOARD_DID_OPEN, {
      detail: { keyboardHeight },
    });
    win.dispatchEvent(ev);
  }, KEYBOARD_ANIMATION_DURATION);
};

This change would delay the event dispatch until the keyboard animation is likely to be complete, potentially reducing UI flickering.

Rationale

Consistency: We already have a KEYBOARD_THRESHOLD constant in the same file. Adding KEYBOARD_ANIMATION_DURATION here would maintain consistency. Encapsulation: It keeps all keyboard-related constants in one place. Clear Intent: It explicitly defines the animation duration, making the code's intention clear.

Questions

Does this approach seem reasonable to address the flickering issue? Are there any potential side effects or performance concerns with this solution that I should be aware of? Are there any other areas you think we should investigate related to this issue?

Thank you for your time and consideration. I look forward to your thoughts and any additional insights you might have on this issue.

[htran-ubed]

I had the same problem when I had this in my CSS styling:

ion-modal { --height: 100svh; }

After removing this, the flickering was no longer there.

[thetaPC]

Thank you for submitting the issue!

Please provide a minimal repro. It would help us debug this issue further and determine if it's a duplicate of https://github.com/ionic-team/ionic-framework/issues/29651.

[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.

[thetaPC]

Closing due to the lack of a reproduction. If the issue persists, please open a new one with a minimal reproduction. Thanks!

[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.