Change in fixed table layout leads to unneeded scrollbar on array-grid

[jchaffraix]

WebKit recently changed its fixed table layout algorithm to consider the cell's content-box instead of the border-box as was the case in the past. See https://bugs.webkit.org/show_bug.cgi?id=78412 and to some extend http://crbug.com/124816 (it has some reference to this bug too)

If you open http://dev.sencha.com/deploy/ext-2.3...rray-grid.html in any version of Chromium above 19 (that includes the WebKit change), you will see an unneeded horizontal scrollbars.

The work-around is simple: you need to set box-sizing: border-box on your cells' style to keep the existing behavior. The following change solves the issue for me (but don't think this is a definite answer):

.x-grid3-cell {
[...]
box-sizing: border-box}

[scottmartin]

Example for: ext-2.3.0

Can you verify the version of ExtJS you are using?

Scott.

[jchaffraix]

> Can you verify the version of ExtJS you are using?

Note that I don't use ExtJS, I am merely reporting the issue as we keep getting them reported against Chromium and I wanted to make sure you were aware of the issue.

The people reported bugs against ExtJS 2.3.0 (http://dev.sencha.com/deploy/ext-2.3...rray-grid.html) and ExtJS 3.4.0 (http://dev.sencha.com/deploy/ext-3.4...ow-editor.html).

AFAICT the first link doesn't reproduce on the latest ExtJS (4.1) and I couldn't find the second link's example against ExtJS 4.1.

[scottmartin]

Thank you for the report .. I will have to double check, but I believe this is a active bug for 3.4 in regards to Chrome issue.

Scott.

[technospino]

This is a work around i have been using

//Issues with Grid rendering in new version of ChromeExt.grid.ColumnModel.override({
    getTotalWidth:function (includeHidden) {
        var off = 0;
        if (!Ext.isDefined(Ext.isChrome)) {
            Ext.isChrome = /\bchrome\/\b/.test(navigator.userAgent.toLowerCase());
        }
        ;
        if (Ext.isChrome) {
            off = 2;
        }
        ;
        if (!this.totalWidth) {
            this.totalWidth = 0;
            for (var i = 0, len = this.config.length; i < len; i++) {
                if (includeHidden || !this.isHidden(i)) {
                    this.totalWidth += this.getColumnWidth(i) + off;
                }
                ;
            }
            ;
        }
        ;
        return this.totalWidth;
    }
});

[rich02818]

@technospino is your override for v3.4 or ?

[technospino]

It is for 3.4

[honzakuchar]

The fix above doesn't fix it at all. Try it on this example: http://dev.sencha.com/deploy/ext-3.4...aderGroup.html.

But this one works perfectly (on Chrome 21) (tested on ExtJS 3.3.1)

@media screen and (-webkit-min-device-pixel-ratio:0) { 	.x-grid3-cell, /* normal grid cell */
	.x-grid3-gcell /* grouped grid cell (esp. in head)*/
	{
		box-sizing: border-box;
	}
}

Before applying fix:
grid-chrome-21.jpg

[rich02818]

Thank you for the report .. I will have to double check, but I believe this is a active bug for 3.4 in regards to Chrome issue.

Scott.

What is the bug number? What build is it targeted for?

[scottmartin]

Have you checked this using 3.4.1 and the latest version of Chrome?

Scott.