This works fine for me!
Thanks!
Yeah im wondering how the ionic team isnt seeing this at all for the last x versions? weird
your solution. Can you explain it/
In what file? what is the location? thanks
Alright so I finally figured out what was causing the issue for me. In the view I was transitioning from I had an extra <div>
above the <ion-view>
where I was declaring a different header to be usedā¦ removing this and using the correct ion-nav elements seems to have fixed the problem for me.
From this:
<div class="bar bar-header bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title uppercase" >{{steak.cut}}</h1>
<button class="button button-icon icon ion-knife" ng-click="modal.show()">Steak</button>
</div>
<ion-view>
{The rest of my view here}
to this:
<ion-view title="{{steak.cut}}">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-knife" ng-click="modal.show()">Steak</button>
</ion-nav-buttons>
{The rest of my view here}
You are right. For me it was to remove this from the templates:
<ion-header-bar class="bar-balanced">
<h1 class="title">your title</h1>
</ion-header-bar>
This should not go there as you already defined your header in your index.html
The post by rubyme8 seems to be working for me (thanks) except in the case where I have a on-swipe-right="returnToSchedule()"
on the ion-view
tag.
All the returnToSchedule()
function does is to call $ionicNavBarDelegate.back()
but that causes the black screen to show again during the animation.
Any idea if there is a solution for this?
This issue just started for me upon upgrading from Beta 13 to Beta 14 with no other changes on my end. I hate to downgrade back to Beta 13ā¦
I fixed my issue by removing the abstract state from which it inherited. I think the problem may lie with the required template for an abstract state, but I donāt know if itās the same with anyone else?
I got same issue due to using dynamic loading of templates. I also use abstract state.
My ionic version is 1.2.13 which is beta-13. Cordova version is 4.1.2. Angular version is 1.2.
I am testing my app in android simulator. Android version is 4.4.2 kitkat.
Yep - Iāve had the exact same problem with moving into an abstract state (or rather moving into a child state that has an abstract state parent) ā removing the abstract state worked to remove the problem completely on desktop chrome, but it persists on mobile, albeit in a gentler fashion, at least on ios8.
Hi All,
I am also facing same animation issue in IOS , below is my case.
Login page > dashboard > Account info > Detial > Logout > Login
In above scanario when user logout I use all the possible solution in the below code.
$ionicHistory.nextViewOptions({
disableBack: true,
disableAnimate : true,
historyRoot : true,
});
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
$ionicSideMenuDelegate.toggleLeft(); // Menu didn't close in this case so toggle menu assign code.
$ionicSideMenuDelegate.canDragContent(false);
$state.go("app.login");
View stuck and show black screen left and right for about half second than get stable.
Let me know if I am missing something.
I had same problem. The problem was due to loading dynamic template after REST API call to server.
example:
<ng-include src="getTemplate()"></ng-include>
<script type="text/ng-template" id="template1">
Template 1
</script>
in controller
$http.get(url).then(function (data) {
$scope.getTemplate = function () {
return ātemplateā + data.template_num;
}
});
function getTemplate isnāt availation untill REST API call returns. Thatās why black screen comes.
iāve mentioned this behave if you try to go to a view with a collection-repeat.
I am also loading the template using ng-include but donāt have any collection repeat in that template, what is the solution in case if I have a collection repeat ?
In my case removing all custom classes from ion-view solved the problem.
I added an explicit background to the root ion-nav-view.
Sometime ionic sets it to #000.
This took a ton of debugging to figure out for me on beta14, but it ended up being my css.
.has-header { -webkit-transition: 200ms top; }
I had been using that for a flash message transition. Might not be the problem for most here but check if your css styles are messing with something ionic-specific.
Hey guys I have seen this a bunch of times throughout my app as well during slide tranistions. I have seemed to override the black background by adding the following css.
[nav-view-transition][nav-view-direction] {
background-color: transparent;
}
this should override the background color for any platform in any slide direction
did you find any solution to the black screen?