Page text overlaps at page transitions

I have a home page with a side menu of 5 menu items which point to another page.

When I click the menu item, the first slide text is overlapping on side menu and the next slide. It looks more like an overlap when moving from one page to another.

Anybody actually had a workaround for the problem!

Hey @dhondi_srikanth. Can you explain a bit more about how you are structuring your app? Are you using <ng-view> somewhere in there, using the left menu clicks as a trigger for routing? Or are you using a different system for linking?

If you had any more code to share (or even privately if you have to: max@drifty.com) I would be happy to help!

Hi Max, I mailed you the app link.

Thanks @dhondi_srikanth. I replied to your email, but this looks like an issue with the sliding animation. Unfortunately, it expects to start at 0,0 but when the side menu slides the content over, that is no longer the case so it misbehaves. A quick solution would be to remove the animation for now until we can figure out a way to fix this. So change:

<pane side-menu-content nav-router animation="slide-left-right-ios7">

to

<pane side-menu-content nav-router>

I wanted the animation so I fixed the issue on my way :smile:

added background-color: white to <content>.

Now looks good :smile:

Okay, thanks @dhondi_srikanth. I’ll see about getting a fix like that into the animation.