20 Oct 2009 9:37 AM #1
erratic grid behavior after scrolling down and selecting a row in IE8
There seems to be an issue with certain grid types in IE8. Here is an official Ext JS example,
The problem occurs when you scroll down and try clicking on a row, the scrollbar seems to jump to a random position on the page, I have been playing with this for a while and cannot see any pattern in the behavior. Maybe it is trying to center the selection and has incorrect Y coordinates after scrolling? Either way this is certainly not desired behavior. I have not tested other versions of IE but Firefox and Chrome do handle it properly.
Also, I realize the example page is for Ext JS 3.0, however the problem exists in the 2 branch as well (which is what I am using)
20 Oct 2009 5:43 PM #2
- Join Date
- Apr 2007
- Sydney, Australia
- Vote Rating
Not seeing it in IE8. Scroll down so that half of a bottom half of a row is visible, but not the top. Click on the visible part of the row, the whole row becomes visible.
The behaviour is the same in FF.Evan Trimboli
Twitter - @evantrimboli
Don't be afraid of the source code!
21 Oct 2009 6:12 AM #3
I have tested this issue on 2 machines, one running Vista with IE 8.0.6001.18828 and another running XP with IE 8.0.6001.18702 and i still get the strange behavior. The behavior occurs when scrolling a ways down the page and clicking on any list item whether it is fully visible or not. Something else that I have noted is that by using IE8's 'compatibility mode' it fixes the problem, however of course it cannot be expected of the end-user to use compatibility mode.
21 Oct 2009 4:51 PM #4
In my experience you will get more mileage with IE8 if you use the following meta tag
<meta http-equiv="X-UA-Compatible" content="IE=7" />
22 Oct 2009 6:03 AM #5
Great! Thank you very much, this also solves the issue where ordered lists are displayed as 1,1,1 instead of 1,2,3! Gotta love IE8 haha
22 Oct 2009 10:23 AM #6
Having the exact same issue for IE8 (IE7 and FF are fine). Is there a fix without adding the meta tag?
both ext example - http://www.extjs.com/deploy/dev/exam...id/paging.html and some of my grids are jumping randomly when I scroll down and click.
Last edited by miti; 22 Oct 2009 at 10:43 AM. Reason: add
23 Oct 2009 1:02 AM #7
- Join Date
- Mar 2007
- The Netherlands
- Vote Rating
23 Oct 2009 9:32 AM #8
I have this issue with Ext2 as well. We just upgraded to Ext3 yesterday and the issue is still there. And the ensureVisible fix doesn't fix the problem. This is an IE8 specific issue. Thanks.
26 Oct 2009 10:27 AM #9
I am seeing this same behavior in IE8 and Ext 2.3.0. I have a grid panel with 200 rows. When i scroll down to the bottom and select the last row out of the view, the grid readjusts and pushes the selected row out of view. I then have to scroll down again to see the selected row. This is not unique to the last row. It happens once i scroll a short ways down the 200 row and select any row.
Does anyone have any idea what is causing this? Is there a fix or workaround for it besides the meta tag?
26 Oct 2009 1:15 PM #10
Unfortunately, I don't like the fact that we need to use the IE7 compatibility tag to ensure there are no rendering problems in IE8 - purely because it feels like we're revisiting old territory.
However, with this said, all my rendering problems were solved when I added this tag.
I'm sure the ExtJs team are hard at work trying to solve any teething problems in IE8, but for the mean time, i'll use the above solution.