List items in grid mode are jumping and get duplicated while viewing

[vedtam]

Hi,

I have an iron-list in grind mode containing a list of paper-card elements. While testing my app, duplicate items appear, while on an older Android device (ARM 1.9Ghz quad core), when I am scrolling slowly items are jumping all around and duplicates are more frequent than on desktop, which makes things kinda hard to follow.

Is there a way to get around this?

Duplicates:

Jumping items screen capture desktop:

https://youtu.be/hAlmwTm2PZE

Jumping items screen capture mobile (sorry for handhold capture):

https://youtu.be/03IqQVk-Pr8

Expected outcome

The list items should update while off screen and without duplicate items

Steps to reproduce

1. Put a paper-card into an iron-list element in the page.
2. Open the page in a mobile browser.
3. Scroll up-down slowly the element.

Browsers Affected

• OSX 10.10 Chrome v. 58
• Android 4.3, Mobile Chrome v. 58

[rbjarnason]

+1 @vedtam I have exactly the same problem on screens with little height. Any ideas for a workaround?

[rbjarnason]

To clarify then this exact behavior happens to me, as shown in the YouTube video, on any computer running any browser where the window height is roughly less than two height of the paper-material elements. In this image there should only be one box featuring a dog!

[rbjarnason]

Here is a link to a live production system where this bug is happening: https://kosningar-2017.betraisland.is/group/1196

[rbjarnason]

Another screenshot from Firefox showing an extreme version of the problem:

[rbjarnason]

Help! Any news on this? I'm still using polymer 1.x but its a "large" app and I do not have the resources to move yet. Please help! You can visit the app showing the problem on low height window on any browser: https://kosningar-2017.betraisland.is/group/1196

Here is another example with some debug - the top right and top left boxes are the same box:

Here is a screenshot highlighting the html when inspecting the top right card using the Firefox inspector tool (this problem happens in all browsers I have tested).

Here is a screenshot of the inspection of the bottom left card:

[rbjarnason]

@vedtam Did you find a solution to this problem?

[keanulee]

I believe this line is the issue:

https://github.com/PolymerElements/iron-list/blob/fc8d6216d14729c56bb316d27354ee4fef60bed8/iron-list.html#L651

@rbjarnason can you try commenting out that line in source to see if that fixes the issue?

[rbjarnason]

Thanks for the pointer @keanulee I tried commenting out this line and the problem got a lot worse, for example the same card being repeated across both rows. I tried changing that line in different ways but all changes to it made the problem worse. I'm going to look into this a bit close tomorrow, thanks again this is the first lead I get on the problem.

[keanulee]

Actually, I think you need to do the adjustment for grid, but it needs to be done before modding against _physicalCount. So something like:

    set _physicalStart(val) {
      if (this.grid) {
        val = val - (val % this._itemsPerRow);
      }
      val = val % this._physicalCount;
      if (val < 0) {
        val = this._physicalCount + val;
      }
      this._physicalStartVal = val;
    },

I'll work on patch and test for this, but in the meanwhile please try it out.

[rbjarnason]

Unfortunately, this did not work - did not get worse but produced results like this. One additional observation, the boxes also jump around in a strange way, they are in different locations than expected (you expect the column items not to reorder within the rows) and this problem seems to be worse when you are scrolling up.

[rbjarnason]

When you increase the height of the screen to roughly cover the height of two cards plus margins then the problem goes away.

[Westbrook]

@rbjarnason Looks like you're also using the 1.x branch of the iron-list code currently, correct? I assume so from this line #### Main document scrolling - [jsbin](http://jsbin.com/cojuli/edit?html,output) in your app build. If that is so, I'm pretty sure that this PR https://github.com/PolymerElements/iron-list/pull/455 needs to be ported back to that branch in order for you not to have this problem anymore.

However, being iron-list 2.x is hybrid you might try upgrading to the newest version instead.

[rbjarnason]

@Westbrook Thanks! I upgraded to the 2.x element and the problem is gone :) It's on my todo list to move our open source app to 2.x soon, I hadn't thought about trying to use the hybrid elements from 2.0.

[Westbrook]

Awesome! The hybrid approach is very cool, and an important part of making that transition. Theoretically, all of your 1.x components can be moved to 2.x hybrid fairly simply and then you can move the underlying Polymer.js to 2.x later. Glad to help you take some of the first steps.

[phidias51]

I'm using 2.0.18 and this is still occurring. Has anyone tracked down the source of this error?