New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: footer/tab-bar hides when webview resizing is disabled and keyboard opens which causes layout shift #28226
Comments
Thanks for the report. There are several requests here, so I'll address each one individually:
|
Thank you for pointing out the keyboard fix - To be complete though, can you confirm that it is a bug that the
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:
It includes the keyboard animation code: https://github.com/sign/translate/blob/master/src/app/directives/keyboard-flying.directive.ts RPReplay_Final1696842108.mov |
Thanks! So it sounds like there are two bugs here:
This is being addressed in #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
RPReplay_Final1695561736.2.MOV
RPReplay_Final1695561736.MOV
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.
The text was updated successfully, but these errors were encountered: