[2.2] Mouse wheel scrolling makes grid text disappear (Safari 3.1)

[albertyips]

This issue was discussed in the Premium Member forum:
http://www.extjs.com/forum/showthread.php?t=43639

On Safari 3.1 (both mac/windows versions), using the mouse scroll wheel to scroll a grid within a panel causes text of the grid to disappear. I can see the gridheader and clicking on the a row activates the proper functionality. I just can't read the text! Very annoying for a user. Initially i thought the text was white but selecting the row changes the background color and I still can't read the text.

To reproduce:
Go to "From Markup Grid Example" using Safari.
http://www.extjs.com/deploy/dev/examples/grid/from-markup.html

Click "Create grid". Select a row in the grid. Even thought the grid doesn't have a scroll bar, moving the scroll wheel makes the text disappear.

Albert Yips

[jay@moduscreate.com]

i was able to reproduce the problem as well.

[albertyips]

This problem isn't related to something strange that we do but is reproducable using standard ext examples and by other members of the community.

Since we support Mac, this is significant issue for development of our product on ext. We make extensive use of grids and are currently stuck at version 2.0 until we can get this resolved. Earlier versions of ext didn't have this problem, so a solution probably exists.

Any help would be much appreciated?

[evant]

So this wasn't happening in 2.1? What happens if you turn off deferred row rendering?

[Condor]

This happens on all grids that have autoHeight:true on Safari 3.1.2 on Windows XP SP3 (so probably on both Win and Mac).

[albertyips]

This also happens in 2.1. We tried to upgrade to 2.1 but ran into the same problem. So something in 2.1 causes this problem.

Not sure i know what deferred row rendering is. We try to use lazy rendering as much a possible. Our grid is part of layout so we let the layout render the grid. How do i tell if we you deferred row rendering?

Interesting observation about autoHeight:true. Setting autoHeight:false for the grid in our application stops them from disappearing. However, this configuration isn't a option for us.

Making progress!

Albert

[Condor]

This overide seems to fix the problem:


Ext.override(Ext.grid.GridView, {
layout : function(){
if(!this.mainBody){
return; }
var g = this.grid;
var c = g.getGridEl();
var csize = c.getSize(true);
var vw = csize.width;
if(vw < 20 || csize.height < 20){
return;
}
if(g.autoHeight){
this.scroller.dom.style.overflow = 'visible';
this.scroller.dom.style.position = 'static';
}else{
this.el.setSize(csize.width, csize.height);
var hdHeight = this.mainHd.getHeight();
var vh = csize.height - (hdHeight);
this.scroller.setSize(vw, vh);
if(this.innerHd){
this.innerHd.style.width = (vw)+'px';
}
}
if(this.forceFit){
if(this.lastViewWidth != vw){
this.fitColumns(false, false);
this.lastViewWidth = vw;
}
}else {
this.autoExpand();
this.syncHeaderScroll();
}
this.onLayout(vw, vh);
}
});

ps. The final fix should use a class instead of setting the style directly.

[albertyips]

That works beautifully in our test environment. Upgrading the development servers. Let you know if we find any more issues.

Thanks so much.

Albert

[albertyips]

We upgraded our development servers and found a problem with ie6/7 in our application. The first time you click in the grid with a scroll bar showing using IE6/7, it jumps/scrolls the grid but doesn't invoke the link/grid action.

If you scroll the screen using the scroll wheel or the scrollbars, selecting another items the grid scrolls/jumps again.

Test Summary:
Refresh page to clear cache
Make sure page loads with vertical scrollbar
click an item in grid

Test Results:
Grid Jumps and you need to click item again.
After that first click the grid preforms correctly.

Safari 3.1, Firefox 2 & 3 work fine. Any idea of what might cause this problem?

Albert

[Condor]

Could you post some example code that demonstrates the problem?

[albertyips]

Working on an example now. Should be able to post something soon.

Albert

[JoomlaMan]

Disappearing grid problem when using mouse wheel to scroll exists for Google Chrome browser also

[Condor]

That is to be expected. Both Chrome and Safari use the WebKit rendering engine.

[Snakehit]

Has this been fixed in SVN already?

[Gannon]

Hello,

Any news on this bug with Safari 3.x ?
My actual version is 3.2.1.

[evant]

Try the fix posted by Condor, it seems to work correctly.

[Gannon]

Thanks Evan,

What I have tried of the trick works fine, thanks for pointing it out.

I was more wondering if a correction would be brought out for this problem.
As I'm testing ExtJS for a probable use in future projects. Not knowing much about the roadmap of the ExtJS project, I'm looking out for these type of corrections.

Good work any way ! Thanks again

[Condor]

The has already been fixed in the current Ext 2.x and trunk SVN branches.

[chiphi13]

I have downloaded the lastest code from SVN and the fix doesn't appear to work for chrome.

[razvanioan]

I want to confirm that this is happening also in Adobe AIR, which of course is based on the same WebKit browser engine.

This is happening only if you use autoHeight: true and you use scroll wheel over the grid area, not necesarily to click on one row (just load grid & use scroll wheel with mouse over it).

It's doing this even if you don't have a vertical scrollbar (only few rows).

If autoHeight is false, and use a static height value, it works fine.

Thanks to Condor, the override works nice.

[Condor]

@evant: Maybe you should remove the Ext.isSafari check. It's also wrong for Air and Chrome and making the element static isn't a problem for IE, FF and Opera.

[mystix]

[friendly bump ]
in light of @cutterbl's report:
http://extjs.com/forum/showthread.php?t=67980