The issue is in LayoutGrid::layoutGridItems(), when we keep track of the items overflowing the grid area [1].
        // Keep track of children overflowing their grid area as we might need to paint them even if the grid-area is
        // not visible
        if (child->logicalHeight() > overrideContainingBlockContentLogicalHeight
            || child->logicalWidth() > overrideContainingBlockContentLogicalWidth)
            m_gridItemsOverflowingGridArea.append(child);
    }

We only take into account the height or the width, but not the the margins.

In the attached example (check it live at [2]) there's a grid with 4 columns: 100px 50px 150px 100px;
There's a red item in the 2nd column.
Then there's a grid item in the 4th column, with "margin-left: -200px;" and a fixed width of 50px. The item should appear just on top of the red item, because of the margin.
The grid is embeded in an iframe of 300px width, so without scroll you can only see the first 3 columns.
As we only check the size of the green item to determine if it's overflowing or not, we decide it's not (50px < 100px). And like we don't paint the forth column, we don't paint that item either, which is wrong.

We should check margins too to avoid this issue. This was detected by @cbiesinger in an unrelated patch review that was touching this code [3].

[1] https://chromium.googlesource.com/chromium/src.git/+/f7dbf39be31d8aa9214d5d84da613508d4e06491/third_party/WebKit/Source/core/layout/LayoutGrid.cpp#1720
[2] http://jsbin.com/fazowo/1/edit?html,css,output
[3] https://codereview.chromium.org/842193004/#msg9
 

Deleted: bug-painting-item-overlfowing-margins.html 382 bytes

bug-painting-item-overlfowing-margins.html 382 bytes View Download

Deleted: bug-painting-item-overlfowing-margins-current.png 680 bytes

	bug-painting-item-overlfowing-margins-current.png 680 bytes View Download

Deleted: bug-painting-item-overlfowing-margins-expected.png 669 bytes

	bug-painting-item-overlfowing-margins-expected.png 669 bytes View Download