PDA

View Full Version : Missing content of the ExtJS scrollable window on IE10



barthand
21 Feb 2014, 5:32 AM
Hi All,

Recently I've encountered a weird issue on IE10 with scrollable windows being displayed inside the scrollable browser window. Since one image is worth more than thousand words (and with video it's even better), please see the following:


http://www.youtube.com/watch?v=Nu7vWUiE4BE&feature=youtu.be

Basically, it seems that IE10 has some kind of problem with rendering overflow content being scrolled upon by the browser's scrollbar. As you can see on the video, the problem is easily reproducible on either ExtJS 4.1.1 (which doesn't officially support IE10) as well as on ExtJS 4.2.1 (with much more improved IE10 support).

I'd add that problem seems to be isolated to IE10 only. On IE11 (and obviously on other browsers) the problem is gone.

Have anyone experienced similar issue? Any ideas how to fix it or what is causing a problem?

I'm attaching a code that was used to produce the video above. It is just based on dynamic.js code from examples/form (the one coming from examples attached to ExtJS package). At the end simple scrollable window with multiple text fields is created and displayed on top of the dynamic.js examples.

47996

I'd be really thankful for any feedback. :-)

Cheers!
Bart

scottmartin
21 Feb 2014, 8:26 AM
I tried this on 4.2.1.883 and 4.2.2 and I was not able to see the problem your video displays.

As you mention, 4.1.1 is not supported in IE10

barthand
23 Feb 2014, 10:52 PM
Hi Scott,

Many thanks for the answer. I've just tried once again the same on the most recent version of IE10 (build number 10.0.9200.16521) and the issue is there for ExtJS 4.2.1.883.

Please find following steps to reproduce the problem:

Open IE 10 browser window and set its height so the problematic window from the video occupies c.a. 75% of the window's height.
Scroll down the ExtJS window (titled Simple Window 2) to the bottom.
Scroll down the browser's content window to the bottom. It is crucial that the ExtJS window is displayed only in half (e.g. its bottom half is only visible).
Scroll up the ExtJS window, so its scrollbar is placed somewhere around the middle of its content.
Scroll up the browser's window, so the ExtJS window is fully visible (and is placed somewhere on the center of the browser's window).
You may observe the issue shown on the video -- the upper part of the ExtJS window (the one that wasn't visible) is missing its content.

Again, I can reproduce the problem on both ExtJS 4.1.1 and 4.2.1 versions (even though the latter supports IE10).

And again, thanks for any hints in resolving that!

ChocoS
3 Mar 2014, 12:41 AM
Hello,

this is exactly the same problem I have encountered. I'm using IE10 and ExtJS 4.2.1.883.

I confirm what barthand wrote - problem is on IE10 only. And since in my case it's a requirement, I'm stuck with this bug.

Any help would be very much appreciated.

Thanks!