bug: footer/tab-bar hides when webview resizing is disabled and keyboard opens which causes layout shift

[AmitMY]

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

• [ ] Back button does not overlap page title (pretty sure this is an iOS 16 regression)

https://github.com/ionic-team/ionic-framework/assets/5757359/823092b9-bd62-46a4-9d05-d5bd3e2dfcba

• [ ] Keyboard resizes the layout with a significant delay instead of animating the layout size like on chat apps

https://github.com/ionic-team/ionic-framework/assets/5757359/3a16ea4b-d794-478e-918a-a2a080ed621f

• [ ] Page slide-to-go-back is very laggy, not instant like native (can't really add a video)
• [ ] Main tab is not highlighted when in the root path https://github.com/ionic-team/ionic-framework/issues/16949
• [ ] When rotated 90 degrees, the tabs text don't go horizontal https://github.com/ionic-team/ionic-framework/issues/27429

Quick demo video:

Expected Behavior

The user should not feel like they are using a non-native inferior application. Despite building with web technologies, there should be a near-native experience.

Steps to Reproduce

Open various ionic templates on the device (ideally known apps, like whatsapp or tinder etc) and compare the ionic experience to the native one.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI : 7.1.1

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.3

System:

   NodeJS : v18.15.0
   npm    : 9.6.7
   OS     : macOS Unknown

Additional Information

I would like to release my app soon, and before I do that, I am doing some usability testing. but the app does not feel like a native iOS 17 application.

[liamdebeasi]

Thanks for the report. There are several requests here, so I'll address each one individually:

1. Back button does not align with the title I can confirm this is an Ionic bug.

2. Input does not adjust with the keyboard Ionic does not handle this for you. We handle ensuring inputs in the scrollable area are not hidden by the keyboard, but developers are responsible for ensuring things like floating inputs respond to the keyboard. I show how to accomplish this in https://ionic.io/blog/keyboard-improvements-for-ionic-apps. Note you may want to disable webview resizing for this.

3. Performance issues with swipe to go back I need a reproduction case for this, otherwise there's not much we can do.

4. Main tab is not highlighted in the root path As noted, this is already being tracked in https://github.com/ionic-team/ionic-framework/issues/16949.

5. Tab text does not go horizontal in landscape mode As noted, this is already being tracked in https://github.com/ionic-team/ionic-framework/issues/27429.

[AmitMY]

Thank you for pointing out the keyboard fix -

To be complete though, can you confirm that it is a bug that the ion-tab-bar hides when the keyboard is visible AND the Keyboard.resizeMode is KeyboardResize.None? https://github.com/ionic-team/ionic-framework/blob/ac2c8e6c22da4d0d8224def24ddef56ee9d26246/core/src/components/tab-bar/tab-bar.tsx#L75

I think that in that case (when the keyboard is showing but there is no page resize, the tab bar should not hide, since by hiding it changes the inner page height)

[liamdebeasi]

To be complete though, can you confirm that it is a bug that the ion-tab-bar hides when the keyboard is visible AND the Keyboard.resizeMode is KeyboardResize.None?

I think that in that case (when the keyboard is showing but there is no page resize, the tab bar should not hide, since by hiding it changes the inner page height)

Do you have a sample I can try that shows the issue?

[AmitMY]

Here's an example of an app:

git clone https://github.com/sign/translate
cd translate
bun install
bun run build && \
bun x cap sync && \
bun x cap run ios

It includes the keyboard animation code: https://github.com/sign/translate/blob/master/src/app/directives/keyboard-flying.directive.ts but because it has "tabs", the tabs disappear, and then there is some small discrepancy in the viewport when the keyboard is hidden (note the small skeleton shifting a bit)

https://github.com/ionic-team/ionic-framework/assets/5757359/d007f739-ab5c-4b07-b3da-9a147b786503

[liamdebeasi]

Thanks! So it sounds like there are two bugs here:

1. The large title does not align with the back button during the transition

This is being addressed in https://github.com/ionic-team/ionic-framework/pull/28290.

2. The tab bar/footer hides when webview resizing is disabled which causes undesired layout shifts

I'll open a PR to address this shortly.

[hedinasr]

any news on this please ?

[hedinasr]

A workaround for the tab bar/footer that hides when webview resizing is disabled which causes undesired layout shifts:

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation: MutationRecord) => {
      const target = mutation.target as HTMLElement;
      if (target.classList.contains('tab-bar-hidden')) {
        target.classList.remove('tab-bar-hidden');
      }
    })
  })

  useEffect(() => {
    const tabBar = document.querySelector('ion-tab-bar');
    observer.observe(tabBar as Node, {
        attributes: true,
        attributeFilter: ['class'],
      });

      return () => {
        observer.disconnect()
      }
  }, [])