bug: bug: Transition background #000

[ghost]

Type: bug

Platform: ios 8 browser

I discovered that the background of [nav-view-transition="ios"][nav-view-direction="forward"], [nav-view-transition="ios"][nav-view-direction="back"]

leads to an ugly behavior on big screens (iPad Air in my case). Video here

My current version is v1.0.0-beta.14-nightly-974

[adamdbradley]

The black background is there so the view which is leaving can change it opacity and fade out to gray. Is there anything special you're doing with the CSS to change the nav-views? Does this happen on desktop chrome or iPhone?

[ghost]

The fading works well on leaving a page, but not on entering a new page. I discovered the issue on the iPad when Ionic was running as Native app (Phonegap build 3.6.3). After that i debugged on iPad safari and on Chrome (on a mac).

[mhartington]

@mistermow so the video was taken removed, do you have a codepen of this happening?

[Ionitron]

Greetings @mistermow!

My sensors indicate that I require more information in order to assist you.

• Can you provide a detailed description of this issue?
• How would a robot go about replicating this issue?
• On which platform does this happen occur? (iOS, Android, all, etc.)
• On which platform versions does this occur? (Android 4.2, iOS 8, all, etc.)
• Is this an issue with the Ionic Framework or Ionic CLI?

Additionally, providing a codepen that replicates the issue is extremely helpful.

If you wish to get help using the framework itself, I recommended visiting the forum, where many humans will be able to offer wisdom and advice.

Thank you for allowing me to assist you.

[badpenguin]

I've the same problem with iPAD mini 8.3

[JoeyAndres]

Same here.

[pdfowler]

We weren't able to track down the problem and ended up changing our transitions to android on all platforms using $ionicConfigProvider.views.transition('android'). Obviously, this isn't an ideal solution.

Without going into too much detail, here's our setup ... I'll try to setup a CodePen, but want get this in to get the reopen process started

Routes

angular
    .module('signup')
    .config(SignupRoutes);

SignupRoutes.$inject = ['$stateProvider'];

function SignupRoutes($stateProvider) {
    $stateProvider
        .state('signup', {
            url: '/signup',
            templateUrl: 'modules/signup/templates/signup-base.html',
            controller: 'SignupCtrl as vm',
            abstract: true
        })
        .state('signup.register', {
            url: '/register',
            templateUrl: 'modules/signup/templates/register.html',
            controller: 'RegisterCtrl as vm',
            data: { nextState: 'signup.intro' }
        })
        .state('signup.intro', {
            url: '/intro',
            templateUrl: 'modules/signup/templates/intro.html',
            controller: 'IntroCtrl as vm',
            data: { nextState: 'signup.userinfo' }
        })
        /// ... More States Continue in the Signup Flow
    }

signup-base.html

<ion-view class="signup-section view-section header-transparent">
    <ion-nav-bar align-title="center">
        <ion-nav-back-button class="button-icon ion-ios-arrow-back">
        </ion-nav-back-button>

        <ion-nav-title> <i class="app-brand dark"></i> </ion-nav-title>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <ion-footer-bar>
        <button class="button button-block button-positive" nav-direction="forward" ng-click="vm.next()" >{{vm.wizardState.btnText || 'continue'}}</button>
    </ion-footer-bar>
</ion-view>

register.html

<ion-view class="register-screen">

    <ion-content class="has-header has-footer">

        <div class="login-content">

            <form name="vm.mainForm" id="mainForm" class="list list-inset signup-form" ng-submit="vm.submitForm($event)" novalidate>

                <ion-input class="item item-input">
                    <i class="icon ion-email placeholder-icon"></i>
                    <input name="email" id="email" type="email" placeholder="Email" ng-model="vm.user.email" oset-focus focus-me required>
                    <i class="icon ion-alert placeholder-icon validation-icon"></i>
                </ion-input>
                <br/>
                <ion-input class="item item-input" ng-hide="vm.user.provider">
                    <i class="icon ion-locked placeholder-icon"></i>
                    <input name="password" id="password" type="password" placeholder="Password" ng-model="vm.user.password" ng-minlength="8"
                    oset-focus required focus-me="vm.focusPass">
                    <i class="icon ion-alert placeholder-icon validation-icon"></i>
                </ion-input>
                <ion-input class="item item-input" ng-hide="vm.user.provider">
                    <i class="icon ion-locked placeholder-icon"></i>
                    <input name="confirmPassword" id="confirmpass" type="password" placeholder="Confirm Password" ng-model="vm.user.confirmPassword"
                    compare-to="vm.user.password" ng-focus="vm.lastElementFocused = true; vm.clearConfirm();" ng-blur="vm.lastElementFocused = false"
                    required>
                    <i class="icon ion-alert placeholder-icon validation-icon"></i>
                </ion-input>
                <div class="description">
                    or
                    <br/>
                </div>
                <div class="description">
                    <button type="button" class="button button-facebook icon-left ion-social-facebook" ng-click="vm.fbLogin()">
                        &nbsp;|&nbsp;Sign Up With Facebook
                    </button>
                </div>
                <input style="position:absolute; left:9999px" type="submit" />

            </form>

        </div>
    </ion-content>
</ion-view>

intro.html

<ion-view class="signup-screen intro" >
    <div class="bar bar-subheader" ng-if="vm.headerText">
        <h3 class="title big-lineheight" ng-bind-html="vm.headerText"></h3>
    </div>
    <ion-content class="intro-block has-header" ng-class="{'has-subheader':vm.headerText}">
        <div class="image-holder">
            <i class="icon ion-ios-people-outline"></i>
        </div>
        <div class="description">
            <p>This is the intro text</p>
        </div>
    </ion-content>
</ion-view>

SignupCtrl

function SignupCtrl ($ionicHistory, $q, $scope, $state, UserService) {

    var vm = this;

    vm.goBack = $ionicHistory.goBack;

    vm.nextState = $state.current.data.nextState; // pseudo ... changed to condense example
    vm.next = goNext;

    function goNext () {
        return vm.stateAction()
            .then(function (success) {
                $state.go(vm.nextState, { data: success });
            });
    }

    $scope.$on('$ionicView.enter', function (event) {
        vm.nextState = $state.current.data.nextState; // pseudo ... changed to condense example
    }
}

Platforms & Reproduction

I'm able to repro this issue on all iOS 9 devices and Desktop Safari on OS X 10.11.4. I have not checked older platforms

[jgw96]

@fatty1380 hello! Were you able to get that codepen together? Thanks!

[pdfowler]

@jgw96 - sorry, I haven't. I may have some time to make a go of it later today or this weekend and will update accordingly ...

[jgw96]

@fatty1380 no problem! No rush at all! I just cant seem to repro with any of my apps, so would love to see your code. (:

[jgw96]

Hey! I am going to close this issue for now, but if you get a chance to share some of your code feel free to comment about it and i will reopen. Thanks!