This question is related to this guide/tutorial from the Ionic Framework.
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(), instead of sliding the side-menu.
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.
Another question - how to debug this? I'm using Safari to debug the iOS app.
Any help will be greatly appreciated. Thanks!
UPDATE
After reading about stacking contexts here and also this post, 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 it creates another stacking context, but I'm not sure why it works and whether that's a good or bad solution. But it solved both issues.
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.
The z-index of each item in the left side menu has a z-index of 2; as set on line 3301 of ionic.css.
This works fine on Android but not for iOS, or more specifically, Safari.
In Safari the z-index value needs to be above 9 for reasons I do not understand.
I solved this problem by adding the following to styles.css:
ion-side-menu ion-content ion-list ion-item.item {
z-index: 10;
}
This solved the iOS issue and does not seem to affect Android adversely.
Hope this helps.