IonSplitPane randomly fails to render

I have an IonSplitPane that contains a menu and its pane. Most of the time this works fine, but sometimes when I load the page I get a blank screen. When this happens, the things inside the split pane are rendered into the DOM, but they aren’t showing up. The only difference I can see in the DOM is the presence of the sc-ion-md-h and sc-ion-md-s classes on it when it is broken but not when it works. This doesn’t work:

<ion-split-pane content-id="main" class="AdminRouter_splitPane__2jlCl sc-ion-split-pane-md-h md split-pane-md split-pane-visible sc-ion-split-pane-md-s hydrated">

But this does:

<ion-split-pane content-id="main" class="AdminRouter_splitPane__2jlCl md split-pane-md split-pane-visible hydrated">

I would really love to just figure out why those classes are there, but I’m pretty stumped by what’s going on in the code. Why would they be there sometimes but not always? What do they represent?

FWIW I can pretty readily reproduce this by clearing my browser cache and loading the page. It will generally be blank after that, but on a subsequent reload it works fine.


1 Like

I am having the same problem, only it also happens when I click on a menu item. It will load the new component, but the menu will occasionally (and seemingly at random) fail to render. Refreshing the page causes a proper re-render.

95% of all intermittent problems are race conditions. Have somebody audit all the asynchronously-sourced code in your app to ensure you’re not relying on things being available at times they aren’t guaranteed to be so.

I found what my issue was. Basically, I was misunderstanding how the IonRouterOutlet is used. I did not realize content actually gets rendered inside the Outlet, and was thus not including it as a child of the SplitPane. Instead, I had a Menu and a IonContent inside the Splitpane both with an IDs matching the Outlet. I thought the Outlet would tell the Content what to render.