bug: ion-content scrolling not working with ion-slides directive (v1.2.1)

[jgw96]

From @vchangal on December 20, 2015 17:0

Type: bug

Platform: all

With the new Ionic version available, I tried to migrate my current app to have the benefits of the new directive. But I am currently struggling with a strange behavior after the migration. Scroll feature in slides (ion-slide-page) does not work anymore. Indeed, for every slide, content is dynamically built using ng-repeat. But, when ng-repeat directive has finished to populate the DOM, scrolling area is not updated and user cannot scroll to bottom of the page.

I tried to build a codepen in order to enlight the issue: https://codepen.io/anon/pen/LGNMLZ

---

MAJ

Okey, I found a workaround. May be used globally but I do not have assessed impact on performance and on other possible use cases with the directive.

In the directive 'ion-slides' definition ("slides.js"), I added the following lines in the link function:

 $scope.$watch(function(){                                               
     var queryResult = $element[0].querySelector('.swiper-slide-active');
     if(queryResult == null){return;}                                    
     var wrappedQueryResult = angular.element(queryResult);              
     var height = wrappedQueryResult.prop('scrollHeight');               
     return height;                                                      
 }, function(height){                                                    
     if(height != 0 && height != null){                                  
         $element.css('height', height + 'px');                          
     }                                                                   
 });                                                                     

What is your opinion?

Copied from original issue: driftyco/ionic#4830

[jgw96]

From @vchangal on December 29, 2015 13:16

Okey,

I found that the option autoHeight was existing (default value: false).

So I tried to use it.

Codepen: https://codepen.io/anon/pen/LGNMLZ

There is two issues that I have encountered here: 1- When the swiper is initialised and if there is no page available (typically if pages are dynamically loaded) an error is raised:

TypeError: Cannot read property 'offsetHeight' of undefined
    at Object.s.updateAutoHeight (ionic.bundle.js:9384)
    at Object.s.slideTo (ionic.bundle.js:10575)
    at Object.s.init (ionic.bundle.js:12117)
    at Object.Swiper (ionic.bundle.js:12227)
    at ionic.bundle.js:63351
    at ionic.bundle.js:30891
    at completeOutstandingRequest (ionic.bundle.js:18576)
    at ionic.bundle.js:18848(anonymous function) @ ionic.bundle.js:25512ident.$get @ ionic.bundle.js:22291(anonymous function) @ ionic.bundle.js:30894completeOutstandingRequest @ ionic.bundle.js:18576(anonymous function) @ ionic.bundle.js:18848

ionic.bundle.js:25512 TypeError: Cannot read property 'update' of undefined
    at ionic.bundle.js:63319
    at ionic.bundle.js:30891
    at completeOutstandingRequest (ionic.bundle.js:18576)
    at ionic.bundle.js:18848

After a quick analyse, the issue is that in file slidesView.js from ionic framework (function updateAutoHeight line 584 in v1.2.1), we try to access a dom attribute for the active slide. As the active slide is undefined (does not exist) we raise an error.

2- The function updateAutoHeight in slidesView.js only updates the height of the wrapper (not the container). Moreover it uses offsetHeight instead of scrollHeight.

To avoid the two issues, one can patch the updateAutoHeight with the following code:

s.updateAutoHeight = function () {
    // Update Height
    if (typeof s.slides.eq(s.activeIndex)[0] !== 'undefined') {
        var newHeight = s.slides.eq(s.activeIndex)[0].scrollHeight;
        if (newHeight) {
            s.wrapper.css('height', newHeight + 'px');
            s.container.css('height', newHeight + 'px');
        }
    }
};

[jgw96]

From @jjhester on February 14, 2016 19:9

Thank you for that fix!

[jgw96]

From @anthony-o on March 31, 2016 21:10

Any news about this bug? I still have it in 1.2.4...

[jgw96]

From @anthony-o on March 31, 2016 21:19

I've tried your patch but I have a small remark: autoHeight is working but the pager falls at the bottom of the page (so is not visible until I scroll to the end). Is there a way to make it sticky to the bottom of the page in absolute? (in order not to have to scroll to the end to see it)

[jgw96]

From @konsultaner on August 2, 2016 14:43

I have experienced the same bug with ionic 1.3.1. I fixed this with overflow-scroll="true". But when I start the my app on ios for the first time this error keeps appearing. After the next restart everything seems to work perfectly.

[jgw96]

From @konsultaner on August 3, 2016 10:25

[UPDATE] overflow-scroll didn't fix it. it was indeed the restart ofthe app.

[jjhester]

I still had to use this fix in 1.3.2. I updated the code as follows:

y.updateAutoHeight=function(){// Update Height
    if (typeof y.slides.eq(y.activeIndex)[0] !== 'undefined') {
        var newHeight = y.slides.eq(s.activeIndex)[0].scrollHeight;
        if (newHeight) {
            y.wrapper.css('height', newHeight + 'px');
            y.container.css('height', newHeight + 'px');
        }
     }
}