Ons-tabbar not working on ios with onsenui from v2.0.0 - 2.0.2

[Prior Famous Ehichioya]

Hello,

Using:
OnsenUI: v2.0.0 - 2.0.2
Angular:1.5.8

Ons-tabbar is not working on IOS. It worked great on android.

Visit https://codepen.io/cyberbird20/pen/YGgqPk?editors=1010 with an iPhone or safari browser.

Please any fix/hack so I can publish my application because right now I’m working with Onsenui v2.0.0-rc-17.

Thanks

[Prior Famous Ehichioya]

@Fran-Diox @munsterlander please I need your assistance. Thanks

[rgins16]

@Prior-Famous-Ehichioya

I’m building an app using:
OnsenUI: always the latest version
Angular: 1.5.8

I have had tabbar issues specifically on iOS for MONTHS. After upgrading to 2.0.2 yesterday those issue are finally fixed.

@Fran-Diox says it’s likely because they have updated their polyfill.

Why are you using v2.0.0-rc-17? Have you tried updating to v2.0.2?

[munsterlander]

@Prior-Famous-Ehichioya Sorry for the delay in responding, but I don’t have a mac or iOS device to test right now, so that is why I didn’t respond. I am primarily an Android on Windows developer. I know there were issues with polyfill and createElement which has been resolved in 2.0.2. I would highly recommend using that and updating your CSS files to that as well. If you still have an issue, please let me know and I will go get an iOS device to test on and help you troubleshoot.

[Fran Diox]

@Prior-Famous-Ehichioya I just tried that code in iPad safari. I cannot see anything wrong here…
As the other guys said, 2.0.2 should fix all the problems that the polyfill started in the tabbar. We will probably release 2.0.3 today to fix an annoying bug with init event as well.

[Prior Famous Ehichioya]

@rgins16 @munsterlander @Fran-Diox Thanks for replying. Apologies for the late response.

I tried with 2.0.2 and right now with 2.0.3, It is the same thing.

Test Environment:
Cordova CLI: 6.3.1
IOS platform: 4.2.1
Device: iPhone 5s IOS 10.0.2

The tabbar pages is not getting initialized with the Cordova app or when I visit the code pen https://codepen.io/cyberbird20/pen/YGgqPk?editors=1010 with my device.

On my mac, macOS Sierra 10:12 , safari 10.0, I get the following error.

Any ideas what might be causing it?

Thanks again.

[Prior Famous Ehichioya]

@Fran-Diox @munsterlander help please

[munsterlander]

@Prior-Famous-Ehichioya There are some issues regarding init in iOS as defined here: https://github.com/OnsenUI/OnsenUI/issues/1597

Unfortunately, I do not dev for iOS, so my access to iOS devices is limited. Apologies.

juspriet created this issue in OnsenUI/OnsenUI

closed init event fires twice on ios cordova after load page with navigator #1597

[Fran Diox]

@Prior-Famous-Ehichioya I just tested again on iOS 10 and couldn’t find any issue. Then I thought that maybe this only happens in Codepen…
And yeah, looks like it’s related to the way Codepen includes the external libs. It puts them at the end of the body instead of the head. Working here.

Just move your includes to the head and it will work. We will try to fix it so it works also on Codepen but right now I cannot test these stuff properly.

[Carlos Mejía]

Hi men, did you resolve this? i got the same issue in my app but including scripts in header did not resolve this, if you got this let me know please.

Update: Even with Onsen UI 2.0.3 i’m still having this issue.

**Update 2: **I found a weird solution, i put all the <ons-templates> inside a ‘display: none’ DIV and that div put it inside the <ons-tab> directive and it works fine.

[munsterlander]

@Carlos-Mejía Can you post a codepen with your solution so I can take a look at that? Thanks!

[Carlos Mejía]

@munsterlander sure, when i move my includes to header, tabs wasn’t still working, i found the solution doing this https://codepen.io/carlmejia/pen/bwXJbQ?editors=1010 (based on the first question here)

[munsterlander]

@Carlos-Mejía Ok, I see now. Can you confirm if this codepen works? https://codepen.io/anon/pen/jMgoQG?editors=1010

The issue with the style that you have, is that the templates are nested inside of an ons-page and therefore they are trying to be rendered. I have moved them outside of that tag and everything appears to be working on my end, but I want to make sure it works on your devices.