Headers Misaligning at end of horizontal scroll

[Holly]

I have a grid that is resized by the following JavaScript

function GridCreated(sender, args) {
      var scrollArea = sender.GridDataDiv;
      var gridHeader = sender.GridHeaderDiv;
      scrollArea.style.height = $telerik.$(window).height() / 2 - gridHeader.clientHeight + "px";
      sender.get_element().style.width = ($telerik.$(window).width() * 0.85) + "px";
    gridHeader.style.width = ($telerik.$(window).width() * 0.85 -17) + "px";
  }

The radGrid has the below settings

<Telerik:RadGrid Visible="False" ID="ctlReportGrid" runat="server" AutoGenerateColumns="False" GridLines="Horizontal" CellSpacing="1" xSkin="Mac" EnableAJAXLoadingTemplate="True" LoadingTemplateTransparency="50" Width="400px">
       <ClientSettings>
            <Scrolling allowscroll="true" UseStaticHeaders="true"/>
            <ClientEvents OnGridCreated="GridCreated" />
        </ClientSettings>
    <MasterTableView ShowFooter="True">

In any browser other than IE, when the horizontal scrollbar is taken to the extreme right end, the headers of the columns misalign by the width of the scrollbar. (i.e. they move slightly to the right).
In IE there is a small image that fills  the space above the scrollbar as the headers move to the left. This is missing in the other browsers. 

There are no item-style:widths within the grid. 

Is there a setting I am missing?
 Thank you in advance for any and all help!
 

[Holly]

Sorry, but *bump*!

[Pavlina]

Hi Holly,

I used the provided code to prepare a sample project, but I was not able to replicate the described problem. Find attached my test page and see what is the difference in your case.

All the best,
Pavlina
the Telerik team