Bug: ion-nav-bar set to "invisible" class in Chrome for 2 starter apps

ionic-v1
1

in ionic-starter-tabs and ionic-starter-sidemenu:

ion-nav-bar shows properly in Firefox and Safari. In Google Chrome it isn’t showing up - it has a class called “invisible” attached to it. If the class is removed or its css is disabled then the top nav bar shows up normally.

2

BTW I posted it on the starter project git issue pages but it got closed and Peter C wrote:

“We’re actually disabling issues for these starter project repos. Your issue could probably be better answered on the Ionic Forum. Thanks so much!”

3

I am having this same exact issue. My app works fine in Firefox, Safari, the IOS Simulator. It fails in Chrome. I see the invisible class as well. Are you getting any JS errors in your console? I get the following in Chrome only. Firefox does not have this in the console:

TypeError: Cannot read property 'exp' of undefined
at watchFnToHumanReadableString (<anonymous>:703:19)
at Scope.$delegate.__proto__.$watch (<anonymous>:735:28)
at link (http://127.0.0.1:9000/bower_components/ionic/release/js/ionic-angular.js:5090:16)
at nodeLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:6230:13)
at compositeLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:5640:15)
at publicLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:5545:30)
at updateView (http://127.0.0.1:9000/bower_components/ionic/release/js/ionic-angular.js:5291:11)
at eventHook (http://127.0.0.1:9000/bower_components/ionic/release/js/ionic-angular.js:5235:17)
at Scope.$broadcast (http://127.0.0.1:9000/bower_components/angular/angular.js:12261:28)
at $state.transition.resolved.then.$state.transition (http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:1290:22) <ion-view class="pane">

I am not sure if this error specific to my app or if it is related to this problem, but it seemed like it might be relevant. I did notice that some transitions seem to not be firing at times.

Edit: I was able to fix my error and as far as I can tell it seems unrelated to the problem of the hidden nav bar, which still exists.

For those that might be having the same error as I posed, angular-ionic.js needs to check if the attribute exists before attaching a watcher. Change lines 5090 through 5098 of angular-ionic.js from this:

    $scope.$watch($attr.hideBackButton, function(value) {
      // Should we hide a back button when this tab is shown
      navBarCtrl.showBackButton(!value);
    });

    $scope.$watch($attr.hideNavBar, function(value) {
      // Should the nav bar be hidden for this view or not?
      navBarCtrl.showBar(!value);
    });

to this:

    if($attr.hideBackButton) {
      $scope.$watch($attr.hideBackButton, function (value) {
        // Should we hide a back button when this tab is shown
        navBarCtrl.showBackButton(!value);
      });
    }

    if($attr.hideNavBar) {
      $scope.$watch($attr.hideNavBar, function (value) {
        // Should the nav bar be hidden for this view or not?
        navBarCtrl.showBar(!value);
      });
    }

Unfortunately this did not solve the invisible header bar. :frowning:

4

Just to clarify, I said ‘fails in chrome’, but actually my views are loaded into the nav-bar-view just fine. It is just the nav-header that doesn’t show.

Edit: I am on Cordova 3.4.0 and Ionic 1.0.0 beta1

5

Hi if anyone is having this issue with Chrome could they discuss it on the issues page please?

1 Like
6

Pretty sure I just removed the Angular Batarang extension and it worked. That extension is broken.