Panel: Showing a centered modal panel scrolls underlying page towards top from version 3.11.0 onwards

[insad]

Starting with version 3.11.0 (probably as a result of the "new constructor flow" introduced in this version), showing a centered modal panel scrolls the underlying page towards the top. Problem still not resolved in version 3.14.0, and visible in all browser I tested (Opera 12.16, Chrome 31.0.1650.63 m, IE 11).

See http://jsfiddle.net/insad/KrSh9/2/ for the (correct) behaviour in version 3.10.0

See http://jsfiddle.net/insad/rw6r4/3/ for the problematic behaviour in version 3.14.0

In both examples, scroll down in the resulting page until you find the "Show Panel" button. Clicking on it will show a modal centered panel. In the first example, the underlying page stays the same; in the second example, the underlaying page will scroll to the top (which makes it impossible to use the panel e.g. for selecting items for form input).

[treyruncie]

I have experienced this problem too. I'm stuck on version 3.10.1

[insad]

Well I fear we'll be stuck for a long time still on 3.10.1 👎
Seeing the messages in the old forum, seeing some messages here also about problems with the panel widget, and after 2 weeks nobody of the development team (is there still a development team / team leader out there?) even commenting on this, it looks like a very long road to go before this will be even looked at. And i.m.h.o. it's a very fundamental problem, as "Panel" is simply a wrapper around "Widget", the fundamental building block of most other components.
Looks like I made a wrong choice switching from YUI2 to YUI3...

[juandopazo]

The problem is that WidgetModality is focusing the widget before WidgetPositionAlign centers it in the viewport. The result is that it focuses the panel when the panel is still not positioned, at the top of the screen, and focus forces the scroll to go up.

For now here's a quick and dirty patch: https://gist.github.com/juandopazo/8068955. I need to investigate this further to see if it's not affecting other situations and to find the correct fix.

[insad]

Thanks, this is a good start... patched a 3.14.1 build and put it to work for our websites (as running on 3.10.0, we were missing a lot of IE11-related patches).

[jvswatson]

@juandopazo , any updates on this? I'm definitely interested in seeing a committed fix for this.

[triptych]

//cc @andrewnicols @okuryu

[treyruncie]

@jamesvswatson it has been a while since i dealt with this, but I think that this only happens when the modal element is created dynamically after page load. So if you use a div that exists when the page is loaded, the modal may behave as expected. It might be a work around for you, then again I could be wrong about this.

[andrewnicols]

ISTR looking at this recently. If you stop rendering in the Panel constructor, and render immediately before the show, then it works without the jump.

There was a similar issue some time ago: #1636