I'm seeing a strange behaviour on IE8 & IE9 with YUI contextmenu and scrollable table, much appreciate if someone could tell me how to solve the following issue:
Refer to http://jsfiddle.net/nguanon/yL5Sa/ When making the tbody scrollable on IE8 & IE9, after scrolling the scrollbar to the bottom, right click on a row to have the contextmenu appear, observe that the scrollbar auto jumps top.
The code was taken from YUI example with the following CSS added:
table#dataset thead {
display: block;
}
table#dataset tbody {
display: block;
overflow: auto;
max-height: 200px;
}
</style>
<!--[if IE]>
<style>
table#dataset tbody {
position: absolute;
}
</style>
<![endif]-->
With YUI 2.6.0, after jumping top, scrollbar is back to where it was when we click to other areas (to hide the contextmenu) With YUI 2.9.0, the scrollbar jumps top and stay there. Neither way is good user experience, I would like to understand why it jumps and if we can prevent that.
Debugging show that once the setFocus of the context menu is executed, the scrollbar auto jumps. From the implementation in menu.js, there are also notes about this viewport jump but it doesn't seem that timer fixed this behavior:
/* Setting focus via a timer fixes a race condition in Firefox, IE and Opera where the browser viewport jumps as it trys to position and focus the menu. */
When searching for a solution for this issue, I also saw a similar situation at https://www.redhat.com/archives/freeipa-devel/2012-July/msg00240.html, in which the current scrollbar position is saved and is set back to where it was later. However, I just wanted to see if we can prevent the jump at all. I think it is YUI specific and already asked question at YUI site but if any SO users experiencing with YUI 2 code and knowing the answer, that would be greatly appreciated.