The focus back buffer breaks even and odd coloring of items

[Xaratas]

Description

This FocusBackfillItem function leads to problems with styles for nth-child(even/odd) as it is in the same dom node as all other items, but it is not visible. So you form group of 2 items with the same styling, which should not happen with even/ odd.

    _createFocusBackfillItem: function() {
      var pidx, fidx = this._focusedIndex;
      if (this._offscreenFocusedItem || fidx < 0) {
        return;
      }
      if (!this._focusBackfillItem) {
        // create a physical item, so that it backfills the focused item.
        var stampedTemplate = this.stamp(null);
        this._focusBackfillItem = stampedTemplate.root.querySelector('*');
        Polymer.dom(this).appendChild(stampedTemplate.root);
      }
      // get the physical index for the focused index
      pidx = this._getPhysicalIndex(fidx);
      if (pidx != null) {
        // set the offcreen focused physical item
        this._offscreenFocusedItem = this._physicalItems[pidx];
        // backfill the focused physical item
        this._physicalItems[pidx] = this._focusBackfillItem;
        // hide the focused physical
        this.translate3d(0, HIDDEN_Y, 0, this._offscreenFocusedItem);
      }
    },
    _restoreFocusedItem: function() {
      var pidx, fidx = this._focusedIndex;
      if (!this._offscreenFocusedItem || this._focusedIndex < 0) {
        return;
      }
      // assign models to the focused index
      this._assignModels();
      // get the new physical index for the focused index
      pidx = this._getPhysicalIndex(fidx);
      if (pidx != null) {
        // flip the focus backfill
        this._focusBackfillItem = this._physicalItems[pidx];
        // restore the focused physical item
        this._physicalItems[pidx] = this._offscreenFocusedItem;
        // reset the offscreen focused item
        this._offscreenFocusedItem = null;
        // hide the physical item that backfills
        this.translate3d(0, HIDDEN_Y, 0, this._focusBackfillItem);
      }
    },

Expected outcome

The focus thing either stays put at one place (first child) and exists there right from the start, or if it is not needed to stay in the same node it is placed outside.

Or the back buffer item is dropped completely and the focus is remembered as number / index, and given back via setFocus()

Actual outcome

3 Items in a row have the same color if using an :nth-child(even/odd) selector for color.

Live Demo

https://elements.polymer-project.org/bower_components/iron-list/demo/basic.html

Steps to reproduce

Add css class

#items div:nth-child(2n) {
color: green;
}

Set focus, scroll a bit up and down until a -10000 item apears. Then scroll slowly around and find the spot where 2 following items have the same color

Browsers Affected

Others not tested, but its a general problem with the "hidden" thing in the same dom node.

• [x] Chrome
• [x] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[danbeam]

@blasten is this the same as https://github.com/PolymerElements/iron-list/issues/338?

[Xaratas]

No, i tried 1.3.12 but the bug is still there. The focus backbuffer item can occur in any place in the list.

[drewswaycool]

Still seeing this issue as well.

[keanulee]

Because of the way iron-list positions (with transform()) the focus backfill item between adjacent items (which may not necessarily be adjacent in DOM order), styling with :nth-child() CSS selectors is not supported. One workaround is to style your template based on the index of the item through an HTML binding (e.g. <div class$="_isOdd(index)">).