jQuery Grid Plugin - jqGrid

Hello ,

this code is a sample to demostrate the scrolling rtl isnt working as should  in IE8

the columns  arent sync with header when scrolled right to left 

in ie 10 and firefox it works good

please help

here is my code:

javascript

$(document).ready(function ()

{

   var data =

{

"page": "1", "records": "3",

"rows": [ { Name: "Name 1", "PackageCode": "83123a" ,highscholl:"milton1",a:"aaa1",b:"bbb1",c:"ccc1"},

              { Name: "Name 3", "PackageCode": "83432a", highscholl: "milton2", a: "aaa2", b: "bbb2", c: "ccc2" },

             { Name: "Name 2", "PackageCode": "83566a", highscholl: "milton3", a: "aaa3", b: "bbb3", c: "ccc3" } ] },

grid = $("#packages");

grid.jqGrid({

colModel: [ { name: 'PackageCode', index: 'PackageCode', width: 200 },

{ name: 'Name', index: 'Name', width: 200 },

{ name: 'highscholl', index: 'highscholl', width: 200 },

{ name: 'a', index: 'a', width: 200 },

{ name: 'b', index: 'b', width: 200 }, { name: 'c', index: 'c', width: 200 } ],

pager: '#packagePager',

viewrecords: true,

height: 'auto',

scroll: true,

altRows: true,

autowidth: false,

forceFit: false,

shrinkToFit: false,

multiselect: true,

direction:"rtl",

datatype: "local",

width:280,

data: data.rows,

rowNum: 3,

caption: "Packages",

height: "auto",

ignoreCase: true });

grid.jqGrid('navGrid', '#packagePager', { add: false, edit: false, del: false }); });

and in the body 

<table id="packages">  

</table>         

<div id="packagePager"> </div>