Ionic guide Todo app not showing projects on iOS version

tutorials
1

I’m not sure if this question belongs here. It’s regarding this tutorial. Great tutorial btw.

There are two issues that might relate to each other:

  1. The app is not listing the projects on the side-menu on the iOS build (though it saves them and it loads the last active one when the app starts). The app works as expected on the Android build and on the desktop.

  2. Another rather strange issue (also only on iOS): if I touch the “nav-icon” (to display the side-menu) right after saving a project, it calls newProject().

I followed the tutorial strictly. What’s really weird is that it works perfectly on desktop and Android. I tested on an iPhone 4 and an iPad 2, both with iOS 7.1.1. Both issues occur on both devices.

Any help will be greatly appreciated. Thanks!

1 Like
2

Using Safari’s Developer menu to open the iPhone Simulator in Web Inspector shows that the

<ion-side menu side=left" ..

has a z-index: 0 even when the side menu is open. Changing the z-index: 1 immediately made the projects appear. However, this is not a fix, just an explanation of the problem.

It would appear that, on iOS at least, that when (and only when) the left side menu is open, the z-index needs to be 1 for the ion-content containing the projects to appear.

There is no explicit reference to z-index in the IonicTodo code itself. This may be a bug in the ionic framework.

Note that I have put a fork of the ionic-todo code updated to 1.0.0-beta.6 at

https://github.com/danielzen/ionic-todo

If someone figures this bug out, I will update it accordingly.

3

Thanks for answering.

Setting z-index: 1 on <ion-side-menu side=left" .. places that div over the <ion-side-menu-content> - and its box-shadow, which doesn’t seem to be a good idea…

After reading about stacking contexts here and z-index and scroll on iOS here, I came up with this fix by adding the following rule:

ion-content.scroll-content.ionic-scroll.has-header {
	-webkit-transform: translate3d(0,0,0);	
}

I know that creates another stacking context, but I’m not sure why it works and whether that’s a good or bad solution.

4

I put this in a <style> tag in the header and added it to the github repo at:

I’m in the process of expanding on the demo app, so that helps me to. Thanks.