Page pushed through nav not rendered on device


#1

Doing development in browser, I have no problems, but when I deploy the app to an android device most of the time the nav child that I push onto the stack does not actually render. Looking through the DOM in the console, all of the elements are there and I can interact with text inputs, but the elements themselves don’t appear. If I tap the back button, the screen flashes before correctly animating out of view. This is not an issue in the emulator or ios.

Has anyone else seen this? No console errors here or anything. Even tried doing an ApplicationRef.tick() through the console in case I had some weird issue where I wasn’t pushing data, but no dice.

Update:
Tried bundling the app with crosswalk, and that fixes the first render but if I close the form and attempt to re-access it then the same bug occurs. Also tested on an iPad air with no issues.


#2

More details: The page title does get updated, and sometimes when profiling the timeline in chrome, the render screenshot shows the form being rendered but the device never displays the render.
This is on a dynamic form interface and if I limit the displayed questions (<question *ngFor="let question of service.questions | async">) in the parent template, then there is no problem. 4 Questions and above seem to make chrome choke on rendering.

If I push the form as the root navigation stack then all browsers render correctly… but I would prefer to avoid writing a back case for this.

Tried rendering in various browsers:

Works:
Firefox
Desktop Chrome
Safari
Mobile Safari

Broken:
Edge
Mobile Chrome


#3

Refactored some of the code today and the issue persists…
However I’ve noticed I can get the sub-page to render if I tap the right section of the title bar while it is animating into view. Otherwise SOL


#4

Alright, setting a timeout on adding the configuration of questions of 100ms fixes the issue…?


#5

Did you manged to solve this issue ??

check this link , is this the issue , it’s a bug