v1.0.0-beta.14: wrong ion-slide-box width after opening modal

[adzialocha]

Code-Pen

http://codepen.io/anon/pen/ZYpRzw

The first view contains a slider-box inside a cached view, this slider breaks after opening a modal. This bug occurs only in cached views (since beta 14 release).

Steps to reproduce:

• go to second view
• open modal
• close modal
• go back to first view

Description

Opening a modal triggers an window.resize Event.
https://github.com/driftyco/ionic/blob/master/js/angular/service/modal.js#L163

Slider-directives are listening to these resize events although theyre not visible and in cached mode. Theire event handlers are not being unregistered when put in view-cache.
https://github.com/driftyco/ionic/blob/master/release/js/ionic.js#L7314 (is killmethod ever called? cant find the handler).

The triggered resize event calls the setup() function of the Slider, calculating the width of the slider container. Since this element is not visible at this point the width will be set to zero.
https://github.com/driftyco/ionic/blob/master/release/js/ionic.js#L7109

There might propably be more bugs of this kind with other elements listening to a resize event although theire not shown.

Related issue: #2309

[sloops77]

I'm also having this one. Currently I've hacked a work around into the view's controller:

  $scope.$on '$ionicView.beforeEnter', ->
    ionic.trigger('resize', {target: window})

PS. I would be happy to do the PR if i could get some direction: should it the event listeners be detached and then reattached like scope? Or should the call to setup() be suppressed if the view is detached?

[willyboy]

Having this issue as well.

[dmishh]

I have the same issue. @sloops77 thanks for the workaround!

[darrynten]

👍 have the same issue

http://codepen.io/anon/pen/dPJGKY

[wfsm]

I have the same issue too. @sloops77 I used your solution, but the slides doubled after manually resize, I use ng-repeat to show the slides

[ZelimDamian]

I have the same problem. Show slidebox -> show modal -> back to slidebox , but its not visible.

My initial workaround (somewhat nasty):

  // assuming the slides are static cache this to save DOM lookups
  //var firstSlide = $('.container .slide').first();
  $scope.$watch(function() {
    // this is the nasty bit (visibility polling)
    var visible = $('.container .slide').first().is(":visible");
    return visible;
  }, function(visible) {
    // only need to do this when visible
    if(visible) {
      var width = $('.container .slide').first().width();
      // only update when the width is wrong
      if(width === 0) {
        $ionicSlideBoxDelegate.update();
      }  
    }
  });

I tried @sloops77 's solution, which seems to work nicely. Except that that I call not the resize trigger, but the slideBoxDelegate update directly. I think this will save some extra work, because resize may trigger all kinds of other updates. Here is how I do it:

  // assuming the slides are static cache this to save DOM lookups
  // var firstSlide = $('.container .slide').first();
  $scope.$on('$ionicView.beforeEnter', function() {
    // this is not polling anymore
    var width = $('.container .slide').first().width();
    // only update when the width is wrong
    if(width === 0) {
      $ionicSlideBoxDelegate.update();
    }
  });

[gilles-yvetot]

same problem here! Any update @adamdbradley ?

[imuhammad]

+1

my solution was

$scope.$on('$ionicView.beforeEnter', function() {
$ionicSlideBoxDelegate.update();
});

[DavidePastore]

👍 Same problem for me.

[hasainsab14]

Hi there,

The workaround is not working for me. could some one give codepen sample plz?

[fahimshani]

making cache-view="false" in template file or cache: false in state worked for me.

[CyrilSabbagh]

I don't know why this issue is closed but i'm still having this problem. all libs are up to date

[jcromp]

I had this issue today as well,
@imuhammad This fixed it, thanks!

[Heckthor]

Is there an actual fix for this instead of just workarounds? I still have this issue...