Carousel stops when change browser tabs.

[BenevidesLecontes]

Hi! Why carousel stop when i change browser tabs for long time and return to the tab with carousel?

[icfantv]

@BenevidesLecontes, please do not use the issues forum for support-related requests. Rather, please follow the instructions here as support-related questions are best served by and for the community. The issues forum is reserved for bugs. Thanks.

There are no focus/blur handlers in the carousel so this smells like a browser issue. Please try to reproduce in a different browser. Also "for a long time" is very vague. It is 5 minutes or 5 hours?

I'm going to close this until we get some actionable information. Thanks.

[BenevidesLecontes]

Hi thanks for your answer and sorry about using this forum for support-related questions, but i think this is an issue, this is occur in almost every browsers (Chrome, Edge, Firefox and Safari). If i change the tab about 2 minutes and return to the tab with carousel, It stops and i can't change to the next or previous items.

[icfantv]

I've had our demo page running in the background for 20+ minutes now and it's still working. At this point, if you want us to spend time looking into this, please create a minimally working plunker that reproduces this issue. Thanks.

[BenevidesLecontes]

Hi! Here's the plunker with issue http://plnkr.co/edit/vUXOoEJvtRm7L6TNbaXo?p=preview

[icfantv]

So, while I can see the issue in both your plunker and our demo app also in a plunker, the problem does not exist on our demo site so I'm not sure there's much we can do here. @wesleycho, thoughts?

[wesleycho]

I have seen the demo freeze up as well after a certain period of time - I am unsure what is causing this.

[wesleycho]

I'm talking closer to a day of waiting and the carousel stops working - I think it may be related to this issue.

[icfantv]

Cool, thanks.

[wesleycho]

Looks like this is a legitimate bug, although what is triggering it, I do not know. This is still an issue even after the major refactor.

[icfantv]

Check #5498 for possible solution.

[wesleycho]

You just duplicated the reference @icfantv :)

[icfantv]

Ah, crap. I was on my phone when I did this.

[BenevidesLecontes]

HI! Sorry, but i didn't understand very well the solution, did you tested this possible solution? The little I understand from #5498, i tried to use HTML5 Visibility API, to check if the browser tab has focus/blur and set $scope.$currentTransition = true. Else $scope.$currentTransition = false. But it didn't work.

[icfantv]

@BenevidesLecontes, no, we haven't tested this solution yet. If we had, we would have most likely fixed the bug and marked it as closed. Please remember that we are all unpaid volunteers on this project and we donate our time when we are able.

[icfantv]

@BenevidesLecontes, if you or @punith-mithra want to take a stab at a PR, we welcome quality submissions by the community.

[BenevidesLecontes]

icfantv I solved the issue temporarily, I removed everything from ui-bootstrap-tpls.js file, except the carousel module. And I was trying to remove pieces of cod, when i removed this line $scope.$currentTransition = true; problem solved. I don't what this line does, but removing solve the problem.

[wesleycho]

It marks internally that a transition is happening in order to prevent potential multiple transitions acting simultaneously and the component getting in an inconsistent state.

[thangnguyendt]

Ui angular is freaking awesome except for the carousel -> I'm waiting for the issue to be fixed

[wesleycho]

Just filed https://github.com/angular/angular.js/issues/14120, the status of this issue is dependent on what decision is made there. If it is fixed in ngAnimate proper, then I will close this. If not, then we will implement the hack in UI Bootstrap to fix this.

[wesleycho]

Closing as fixed in Angular via https://github.com/angular/angular.js/commit/2b327f01be16c5eae3fbee99b09dbf58f5b8ae36

[BenevidesLecontes]

@wesleycho the issue persists for me. Angular 1.5.3

[wesleycho]

It is not released yet. It will come in Angular 1.5.4

[gazpachu]

Hi,

my team and I were experiencing this issue with "Angular" and "angular-animate" 1.5.3 and after updating to 1.5.5, the issue is still there. We have also updated "angular-bootstrap" to 1.3.2.

$scope.$currentTransition = true; in goNext() is still breaking the carousel navigation. If we comment out that line, then everything works fine.

The problem seems to be related with ngAnimate, as this method is not triggering:

$animate.on('addClass', slides[index].element, function(element, phase) {

Therefore, the condition if (phase === 'close') is never happening and then $scope.$currentTransition = null; is never set.

Thanks.

[BenevidesLecontes]

For me this issue gone, after 1.5.5.

[davesidious]

Me too. Nothing but awesomeness starting with 1.5.5.

[helenev]

I am able to recreate this issue on your demo page if I click on another tab and wait long enough for a slide transition to have happened, then click back. I've recreated it in Chrome and Edge

[ViperPHP]

I did the following changes and it worked like a champ .. $scope.next = function () { //BOC//Added this section to fix issue where The images doesn't scroll when the browser is minimized and opened again if ($scope.$parent.isBrowserReFocused !== undefined && $scope.$parent.isBrowserReFocused !== null) { if ($scope.$currentTransition === null) { $scope.$parent.isBrowserReFocused = false; } else if ($scope.$parent.isBrowserReFocused && $scope.$currentTransition) { $scope.$currentTransition = null; $scope.$parent.isBrowserReFocused = false; } } //EOC var newIndex = (self.getCurrentIndex() + 1) % slides.length;

  if (newIndex === 0 && $scope.noWrap()) {
      $scope.pause();
      return;
  }

  return self.select(getSlideByIndex(newIndex), 'next');

};

And at the Page level js set the flag "$scope.isBrowserReFocused" to true when window is in focus //BOC//Added this section to fix issue where The images doesn't scroll when the browser is minimized and opened again angular.element(window).focus(function (e) { $scope.isBrowserReFocused = true; }); //EOC