Using with iron-list causes top border to be hidden

[wesalvaro]

trafficstars

Description

Top border gets hidden by contents, specifically when using iron-list.

Expected outcome

The :host(.is-scrolled:not(:first-child))::before should be above the scrollable's contents.

Actual outcome

The lack of a z-index causes :host(.is-scrolled:not(:first-child))::before to be covered by the contents of the iron-list.

Live Demo

https://output.jsbin.com/wuqafigoha

Steps to reproduce

<paper-dialog-scrollable>
  <iron-list>...</iron-list>
</paper-dialog-scrollable>

Scroll down. See that 0z transform3d items of the iron-list cover the top border. Setting the ::before element's z-index: 1 in the paper-dialog-scrollable fixes the issue.

Browsers Affected

• [X] Chrome

[valdrinkoshi]

You can style the :before or :after pseudo elements of the host (paper-dialog-scrollable) from the scope of where you use it https://jsbin.com/hebake/edit?html,css,output

paper-dialog-scrollable:before {
  z-index: 1;
}

I would recommend this instead of having paper-dialog-scrollable set the z-index, in order to have it unopinionated about z-index and stacking context, wdyt?

[wesalvaro]

That doesn't seem to address the issue. I think the purpose of the scrollable region is pretty much to solely put/take away those lines at the top and bottom. Otherwise, I wouldn't bother to use it. I think the behavior, as described, is a bug and should be fixed in this element.

The problem is that a new stacking context is created inside of the .scrollable element when something (like the transform in the iron-list) is used. However, this new stack should always stay inside the scrolling region of the element and never clip into the border lines. I shouldn't need to change the CSS of the paper-dialog-scrollable in these cases unless I specifically want this clipping behavior.

[valdrinkoshi]

I think the purpose of the scrollable region is pretty much to solely put/take away those lines at the top and bottom.

Agreed, this is the expectation. The scrollable region though doesn't have control over the stacking contexts created by the content (iron-list and its items). If paper-dialog-scrollable were to set the z-index: 1 for the ::before pseudo-element, that wouldn't solve the issue for users that set a higher z-index to their iron-list items (e.g. z-index: 10).

Another thing to note here is that iron-list is rendering all the items, instead of only the visible ones (which defeats the purpose of using iron-list in the first place). That's because iron-list is not given the correct width/height where to render:

If the desired behavior is to render all the items, then you're better off using dom-repeat instead of iron-list, and avoid this stacking context issues completely, e.g. https://jsbin.com/xirenab/8/edit?html,output

  <style>
    .sizer {
      height: 300px;
      width: 200px;
    }

    .list-item {
      /* grid-like layout */
      display: inline-block;
      margin-left: -2px;

      background-color: white;
      width: 100px;
      height: 100px;
    }
  </style>
  
  <paper-dialog id="foo">
    <h2>Hello</h2>
    <paper-dialog-scrollable>
      <div class="sizer">
        <template is="dom-repeat" id="list">
          <div class="list-item">
            [[item.name]]
          </div>
        </template> 
      </div>
    </paper-dialog-scrollable>
    <h2>World</h2>
  </paper-dialog>

  <script>
    document.querySelector('#list').items = new Array(100).fill({name: 'Wes'});
    document.querySelector('#foo').open(); 
  </script>

Here a version with iron-list correctly sized: https://jsbin.com/visiji/6/edit?html,output

  <style>
    iron-list {
      height: 300px;
      width: 200px;
    }

    .list-item {
      background-color: white;
      width: 100px;
      height: 100px;
    }

    paper-dialog-scrollable::before {
      z-index: 1;
    }
  </style>
  
  <paper-dialog id="foo">
    <h2>Hello</h2>
    <paper-dialog-scrollable id="scrollable">
      <iron-list id="list" grid>
        <template>
          <div class="list-item">
            [[item.name]]
          </div>
        </template>
      </iron-list>
    </paper-dialog-scrollable>
    <h2>World</h2>
  </paper-dialog>

  <script>
    document.querySelector('#list').scrollTarget = document.querySelector('#scrollable').scrollTarget;
    document.querySelector('#list').items = new Array(100).fill({name: 'Wes'});
    document.querySelector('#foo').open();
  </script>

Notice the iron-list.scrollTarget needs to be the paper-dialog-scrollable.scrollTarget, as scroll events will happen in #scrollable instead of paper-dialog-scrollable itself.

[wesalvaro]

In this simple example to demonstrate the bug, you're right about everything.

However, in my real use case, I would essentially have to reimplement iron-list to lay out a grid of card elements that infinitely scrolls... ='( In my real code, only the visible renders as they should. Also, iron-list isn't actually assigning a z-index at all.

This problem is just caused by the 3d-translate that iron-list is doing to create the grid.