Scroll bar is not included in grid mode item position calculation.

[bwh-rl]

Description

Scroll bar is not included in grid mode item position calculation.

Expected outcome

e.g. Viewport width is 520px, scrollbar takes 20px, and one item 250px, i expect that 2 items are in one row and the viewport is exactly filled.

Actual outcome

The positions are calculated like there is no scrollbar, leading to an 10px margin on the left side and an horizontal scrollbar.

Live Demo

https://jsbin.com/hokulijenu/5/edit?html,output
Seems like inline dom-module does not work in jsbin.

Steps to reproduce

<dom-module id="grid-test">
    <template>
        <iron-list items="[[ items ]]" grid class="fit">
            <template>
                <div style="width: 250px; height: 250px; padding: 24px; border: 1px solid grey;">[[ item ]]</div>
            </template>
        </iron-list>
    </template>
</dom-module>

<script>
    Polymer({
        is: "grid-test",
        ready: function() {
            this.items = [
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0',
                '1','2','3','4','5','6','7','8','9','0'
            ];
        }
    });
</script>

Browsers Affected

Thus scrollbars are taking no room on mobiles and on safari these are not affected.
I have not tested this on any microsoft browser.
Probably it does not occur on Chrome or FF on OS X.

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[blasten]

Thanks for the report. I was aware of this issue, but it's time to fix it :) Ref: PolymerElements/iron-scroll-target-behavior#17

[bwh-rl]

Thanks for the feedback, but PolymerElements/iron-scroll-target-behavior#17 would not 100% solve this. As i wrote in the PR, in the docs about the --iron-list-items-container mixin, there is an example with an margin, but this margin would also have no affect to the item position calculation. Since the elements are placed inside the #items, the position calculations should be based on #items, not on the scrollTarget.