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: Navigation between pages from different nested IonRouterOutlet's breaks UI due to outlets overlap #20219
Comments
@elylucas any plans on this? It should be a disgusting limitation while building an architecture of the future app ;( |
Any updates with this? @elylucas src/components/Menu.tsx:65 src/App:77 Click from a "Navigate" link to an "Account" link and vice versa in the top left menu and the same visual ghosting glitch will occur. What I find really confusing is how the docs says :
|
Hi @alekseykarpenko, @jcarignan, We have a dev release that provides better support for nested IonRouterOutlet components. There is a new prop on IonRouterOutlet that lets the router know it is a nested outlet to better perform the transition. If your'e outlet is a nested outlet directly rendered by a Route in a parent outlet, then use the App.tsx:
Sub1Outlet.tsx:
Sub2Outlet.tsx:
If you can, could you try to install it and let us know if it fixes the issue and if you run into any others? To install it run:
If all goes good this should be available in the next Ionic release. Thanks! |
Hi, I had the same problem where my app flickered when navigating and stop working at one point but, your dev release resolved it. But instead of using two App.tsx
EventPage.tsx:
Thanks for the release. |
Adding |
Hello @elylucas, is there any way to confirm that this solution is still working in ionic 5.5.4 with react router 5.2.0? I am using the following setup of my app:
And inside my
So I am basically using the setup as explained in the docs together with your fix proposed here. However, if I navigate to the subpage Bildschirmvideo.aufnehmen.2021-02-26.um.02.26.21.movI think there is also another issue. See as the ion-router outlet gets assigned the Bildschirmvideo.aufnehmen.2021-02-26.um.02.29.40.mov |
Any solution... currently facing the same issue |
Hi folks, I wanted to circle back to this. I've created an issue on the docs repo for the missing As for the flickering issue: since the |
Thanks for the issue! This issue has been labeled as 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. |
Closing this out due to a lack of reproduction for the latest-mentioned issue, and the fact that the original issue has already been solved (the solution just needs documenting). If anyone is still encountering any problems mentioned here on the latest version of Ionic, please open a separate issue with its own code reproduction. Thank you! |
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. |
Bug Report
Ionic version:
[x] 4.11.8 (latest)
Current behavior:
When trying to navigate between two pages from different
IonRouterOutlets
UI is flickering and breaks, as non active outlet is on the top of others, making all visible UI elements unreachable.Expected behavior:
Navigation between two pages from different nested
IonRouterOutlet
's should be possible. Router outlets shouldn't overlap each other, correctly determining which of them is active now (on the top of others).Steps to reproduce:
Basically, what I'm trying to do is navigation between two pages
Home
(/home
) and List (/list
), both of them are inside globalIonRouterOutlet
, and both have innerIonRouterOutet
for their own nested routes, as described in Docs. And here is a deal: I want to navigate directly from nested route ofHome
(e.g./home/welcome
) to the nested route of theList
(e.g./list/:id
) with correct page transition. And it even works... but only for the first time. Then there are 3 different outlets in DOM overlapping each other, two withz-index: 0
(one of them is needed), and another (incorrect) withz-index:101
, so UI is blocked with transparent alien outlet.Related code:
https://gist.github.com/alekseykarpenko/6e5c71f915cf53eeee896e24ab1ee562/7af928cff5ee6a6553d4fa899d22f5874cc9cb42
Other information:
❗️ Looks like this is strictly related to #18197, #18823, #18845 (all of those Angular issues have been opened since last summer).
The quick workaround for me here was moving
List
's nested routes into parentIonRouterOutlet
:https://gist.github.com/alekseykarpenko/6e5c71f915cf53eeee896e24ab1ee562/7af928cff5ee6a6553d4fa899d22f5874cc9cb42
But that's not a real gold bullet, I want it back 😢 Actually, I have two reasons for that: 1) Use all power of React Router nested routes; and 2) Place
Home
inside Tabs View whileList
will not be there and add Side Menu to both of them within the globalIonRouterOutlet
.Thoughts on fixing this
Even while both pages are in different nested outlets, they have same global outlet. Looks like navigation goes in right way, but outlet controller can't determine current active outlet, giving incorrect
z-index
.Ionic info:
Best regards and thanks for all that you do 💪 Keep em going.
The text was updated successfully, but these errors were encountered: