IE9 issue with kendo grid within tabstrip, having fixed columns and row detail

[Ashley]

I'm experiencing a bizarre issue only in IE9 where I have a tab strip, within the tabstrip is a simple grid with row detail, having fixed columns exceeding the width of the grid thus showing the horizontal scrollbar. When I mouse over the rows or select a row, whitespace is being added to the bottom of the grid. Then once you move the mouse outside the grid, the whitespace goes away and the grid returns to its original size.

If I remove the row detail and do not make the rows or cells selectable, this behavior does not occur.

I need to have row detail, fixed columns and horizontal scrolling because in my app, I can display up to 20 or so columns based on the user's preference.

Here is the jsfiddle using the latest Kendo release and jquery 1.9.1. I also saw this in the previous release as well.
http://jsfiddle.net/Fh29p/

Most of my users are IE8 and are moving to IE9 so this issue needs to be resolved.

Any help is appreciated.

[Dimo]

Hi Ashley,

The problem is caused by a known IE9 bug related to horizontal scrolling, hover styles and vertically expanding content when it is hovered with the mouse.

The problem can be avoided by setting an explicit height to the scrollable container. In your case, this means setting height to the Grid, which will cause the Grid to calculate and set explicit height to its scrollable data area. Alternatively, you can skip setting Grid height, but apply a height style to div.k-grid-content via external CSS.

Regards,
Dimo
the Telerik team