Extjs 5.0.1: Getting white space in grid while scrolling when we give border-radius to grid or to its any parent

Problem: Getting white space while scrolling grid.This whitespace goes away when we mouseover on grid.

Steps: Assign border-radius css property to grid through css/style config.

Sample Code:

Ext.create('Ext.grid.Panel', {
   style:'border-radius:4px;',
});

This is Fiddle

Note: this happens in chrome Version 68.0.3440.42 (Official Build) beta (64-bit).

Please suggest if there is any workaround or any fix !!

Also I wanted to ask why we have transform: translate3d(0px, 0px, 0px) for x-grid-item-container div.

You can resolve this by using overflow: visible; property on grid style.

You can check this working Fiddle.

Code snippet:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        
        Ext.create('Ext.grid.Panel', {
            style: 'border-radius:4px;overflow: visible;',
            title: 'DEMO',
            store: {
                type: 'datastore',
                autoLoad: true
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                flex: 1
            }],
            height: 200,
            renderTo: Ext.getBody()
        });
    }
});