I am working on a control in which you will have two lists with several lists with collections of elements that can be moved between each other.
There is a possibility that the contents of one or both lists will be wider than I would like the element itself, and therefore I have each of them consisting of two sections, and select the following:
<div class="container"> <div class="concealer"> <select size="4"> ... </select> </div> </div>
Inserting a selection into a div allows horizontal scrolling (since the selection is not set). The selection changes (a size attribute is set) to match its contents as elements are added or removed. The Concealer div avoids double scrollbars, hides the vertical scrollbar on the selection, and it has a vertical size when the selection also changes.
I am using html5. IE9 in standard mode and Firefox are fine. The problem I ran into is Chrome (actually Safari, so ... webkit). If the control is in a window or container (e.g. div) with vertical scrolling, and you scroll to the point where you cannot see the top of the selection if the bottom of the selection is visible (or be visible in an external container if you can see the overflow ), when you click an element in a selection element, as a result of which you select focus, Chrome scrolls the outer container either up or far enough so that the top of the selection will be visible if you could see it through divs that contain it.
As already noted, if the lowest option in an element is visible in the window (containing), but the top of the selection is missing, chrome will scroll.
I wrote a script to edit the scrollTop of the scrolled window back to its current position, and this will work, except that I find that in my intermediate and production environment, the setting performed by chrome also causes the actual selection of the option to happen after chrome has made its own settings, which means that click registers on the wrong parameter (this scrolls even though the browser scrolls). This is the problem whether there is an onfocus event to choose from or not.
I was not able to make the option selection problem happen in a barebones test like this, but scrolling itself is a problem.
The only way I tried to prevent this is to size the selected number large enough to fit the bottom of the sample outside the outer container, but this is not at all ideal as it leaves a lot of gaps, a bad user experience and is struggling with a problem that ( although quite deep) only affects the web kit.
Does anyone know how else I can prevent or counteract this behavior?
I had images for this, but, of course, new users cannot post images. Here's a js fiddle that should allow you to easily reproduce the problem: http://jsfiddle.net/4N9Kg/22/