diff --git a/js/ext/angular/src/directive/ionicViewState.js b/js/ext/angular/src/directive/ionicViewState.js
index cbaaba6b44..d6c9d4c563 100644
--- a/js/ext/angular/src/directive/ionicViewState.js
+++ b/js/ext/angular/src/directive/ionicViewState.js
@@ -40,8 +40,8 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
     template:
     '<header class="bar bar-header nav-bar{{navBarClass()}}">' +
       '<ion-nav-back-button ng-if="(backType || backLabel || backIcon)" ' +
-        'type="backType" label="backLabel" icon="backIcon" class="hide" ' +
-        'ng-class="{hide: !backButtonEnabled}">' +
+        'type="backType" label="backLabel" icon="backIcon" class="opacity-hide" ' +
+        'ng-class="{\'opacity-hide\': !backButtonEnabled}">' +
       '</ion-nav-back-button>' +
       '<div class="buttons left-buttons"> ' +
         '<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" ' +
diff --git a/js/ext/angular/test/directive/ionicView.unit.js b/js/ext/angular/test/directive/ionicView.unit.js
index 3f6f40a6f2..f179e4acac 100644
--- a/js/ext/angular/test/directive/ionicView.unit.js
+++ b/js/ext/angular/test/directive/ionicView.unit.js
@@ -51,23 +51,23 @@ describe('Ionic View', function() {
     function backButton() {
       return angular.element(element[0].querySelector('.back-button'));
     };
-    expect(backButton().hasClass('hide')).toEqual(true);
+    expect(backButton().hasClass('opacity-hide')).toEqual(true);
 
     scope.$broadcast('viewState.showBackButton', false);
     scope.$apply();
-    expect(backButton().hasClass('hide')).toEqual(true);
+    expect(backButton().hasClass('opacity-hide')).toEqual(true);
 
     scope.$broadcast('viewState.showBackButton', true);
     scope.$apply();
-    expect(backButton().hasClass('hide')).toEqual(false);
+    expect(backButton().hasClass('opacity-hide')).toEqual(false);
 
     scope.$broadcast('$viewHistory.historyChange', { showBack: false });
     scope.$apply();
-    expect(backButton().hasClass('hide')).toEqual(true);
+    expect(backButton().hasClass('opacity-hide')).toEqual(true);
 
     scope.$broadcast('$viewHistory.historyChange', { showBack: true });
     scope.$apply();
-    expect(backButton().hasClass('hide')).toEqual(false);
+    expect(backButton().hasClass('opacity-hide')).toEqual(false);
   });
 
   it('should show/hide navBar', function() {
diff --git a/scss/_util.scss b/scss/_util.scss
index f26f9e2b0a..09232da52a 100644
--- a/scss/_util.scss
+++ b/scss/_util.scss
@@ -4,13 +4,23 @@
  * --------------------------------------------------
  */
 
-.hidden,
 .hide {
   display: none;
 }
+.opacity-hide {
+  opacity: 0;
+}
+.grade-b .opacity-hide,
+.grade-c .opacity-hide {
+  opacity: 1;
+  display: none;
+}
 .show {
   display: block;
 }
+.opacity-show {
+  opacity: 1;
+}
 .invisible {
   visibility: hidden;
 }