Ionic-framework: bug: anchorScroll throws exceptoin : Cannot read property 'attributes' of null

[ptarjan]

Type: bug

Platform: all

On line 160: https://github.com/driftyco/ionic/blob/master/js/angular/controller/scrollController.js#L160 it reads the attributes property, but on the line before curElm.offsetParent returns null for me. curElm is being set correctly by the doucment.getElementById above, it just does't have an offsetParent attribute. And the DOM spec seems to not have it either (in current browser). Is there a missing angular.element somewhere here?

[mhartington]

Do you have an example of this not working?

[gerisztein]

I'd experienced the same issue.

[mhartington]

Do you have an example of this not working?

[ptarjan]

Yes, I think it is because of this line on https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

"This property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed"."

So make an element that is display none or position fixed that you want to scroll to and test on Safari.

[mhartington]

Again..

Do you have an example of this not working?

[JoeyHoutenbos]

Seems this only occurs in Chrome on desktop. I do not have this problem on mobile (using Crosswalk)..

[ptarjan]

I've been consistently running into this on my Chrome Desktop as @JoeyHoutenbos mentioned.

Here is my stacktrace:

type          : angular
message       : Cannot read property 'attributes' of null
name          : TypeError
stack         : TypeError: Cannot read property 'attributes' of null
    at  /source/ionic-angular.js:7115:0
    at processQueue /source/angular.js:14567:0
    at  /source/angular.js:14583:0
    at completeOutstandingRequest /source/angular.js:5394:0
    at  /source/angular.js:5666:0
url           : #/profile/yscgPGKH15#manager
host          : localhost:8100
localtime     : 1441823345924

To reproduce just do this

$location.hash('something');
// The $timeout is to stop the alert that angular throws "Cannot read property 'getScrollMax' of null"
$timeout(function() {
  $ionicScrollDelegate.anchorScroll(true);
}, 1);

[ptarjan]

I should note that I am getting on device (iOS in this case) as well but with a different message (probably due to minification or maybe safari vs chrome error messages?)

null is not an object (evaluating 'r.attributes')

[ptarjan]

ping?

[mhartington]

Again..

Do you have an example of this not working?

Codepen, plunkr, jsbin.

[Ionitron]

Greetings @ptarjan!

My sensors indicate a reply was requested, but as we have not received one yet, I am using my robot powers to close this issue. However, if you are still experiencing this issue, please feel free to reopen it by creating a new issue, and include any examples or necessary information.

Thank you for allowing me to assist you.

[Ionitron]

Greetings @ptarjan!

My sensors indicate a reply was requested, but as we have not received one yet, I am using my robot powers to close this issue. However, if you are still experiencing this issue, please feel free to reopen it by creating a new issue, and include any examples or necessary information.

Thank you for allowing me to assist you.

[ElodieC]

I had the same issue. This was due to the ion-view being cached multiple times because I used $stateParams to scroll to right anchor.

The workaround is to use a service to save the anchor to scroll to instead of a $stateParams.

[mechon]

I'm also encountering this issue, made a sample at codepen. Error is usually thrown when the container's ng-show value is toggled.

[ghost]

Hi!!

I had the same problem, and found that it was caused by $ location.hash (idElement);

The function $ location.hash () creates a map id's, even the id's being different pages, it is important that they are unique throughout the project.

I recommend the following use:

In HTML:

<div id="nameView-{{variableId}}> POINT </div>

And in controller function:

` this.scrollTo = function (targetPoint){

$location.hash( 'nameView-' + targetPoint);
$ionicScrollDelegate.anchorScroll(true);    

}`

This work to me!

[rgarcia4Crew]

The function $ location.hash () creates a map id's, even the id's being different pages, it is important that they are unique throughout the project.

That's it, that's the key. Thanks @tiagoMaua

[Taewa]

The key was making a unique id. Its working for me.
Thanks @ElodieC @tiagoMaua

[Freundschaft]

the reason is that the id has to be unique and using cached views, this cannot be guaranteed, so the id would need to be removed if the caching kicks in, or am I mistaken?

maybe a better method would be to add a method scrollToElem that takes a html element as an argument? usage of the id causes a couple of problems with cached views

[opensourceexpert]

hi,
after the navigation from scroll page to other, page, when i com back to the scroll and i try to scroll the items, its giving the

TypeError: Cannot read property 'attributes' of null
please help me thank you.

[cgs]

I had unique ids, but for me the issue was caching. Turned off the cache for the related page and it works:

    .state('app.glossary', {
      url: "/glossary?scroll",
      cache: false,
      views: {
        'menuContent': {
            controller: "GlossaryCtrl",
            templateUrl: "templates/glossary.html"
        }
      }
    })

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.