Open AmitMY opened 11 months ago
Thanks for the report. There are several requests here, so I'll address each one individually:
Back button does not align with the title I can confirm this is an Ionic bug.
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.
Performance issues with swipe to go back I need a reproduction case for this, otherwise there's not much we can do.
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.
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.
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)
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?
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
Thanks! So it sounds like there are two bugs here:
This is being addressed in https://github.com/ionic-team/ionic-framework/pull/28290.
I'll open a PR to address this shortly.
any news on this please ?
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()
}
}, [])
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
https://github.com/ionic-team/ionic-framework/assets/5757359/823092b9-bd62-46a4-9d05-d5bd3e2dfcba
https://github.com/ionic-team/ionic-framework/assets/5757359/3a16ea4b-d794-478e-918a-a2a080ed621f
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
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.