Grid Column Resize Bug (Chrome)

[Dan]

Hi,
We've found that resizing columns in Chrome causes a visible glitch in certain circumstances.
We can reproduce the issue on the Kendo Grid demo page:

1) Open the Demo site in Chrome: http://demos.telerik.com/kendo-ui/grid/column-resizing
2) Reduce the width of a few columns
3) Several columns will 'glitch' and overlay

I have attached an example screenshot.

Please can you investigate and/or propose a solution/workaround?

Thanks,
Anthony

[Dan]

I've just noticed that the glitch only appears after the second column resize. 

[Dimo]

Hi Anthony,

This is a bug in Chrome 38:

https://code.google.com/p/chromium/issues/detail?id=423352

I am afraid we can't offer any workarounds at this point and hope the problem will be fixed in the browser.

Regards,
Dimo
Telerik

 

 

[Bridge24]

We have this trouble too only on chrome when we resize columns...

It seems to be an old "known issue" of chrome, as described here: 
http://stackoverflow.com/questions/11002195/chrome-does-not-redraw-div-after-it-is-hidden

We fixed it using that CSS trick:

.k-header {
    -webkit-transform: scale3d(1,1,1);
}

[Dimo]

Hi Daniel,

Yes indeed, using CSS transform seems to resolve the issue. Thank you very much for your contribution!

.k-grid tr
{
   -webkit-transform: scale3d(1,1,1);
}

It appears that the following CSS rule fixes the glitch as well:

.k-grid th,
.k-grid td
{
    -webkit-transform: translateZ(0);
}

Regards,
Dimo
Telerik

 

 

[Rahulkumar]

Awesome !!