CustomScrollPanel Issue (extra overlay DIVs causing performance issue)

[sethGWT]

Hi all,

I've been using the CustomScrollPanel in order to implement my own scrollbars. Everything was working fantastic up until I added DnD (gwt-dnd, not native) to the elements within the scrollpanel. I noticed that there's a huge lagging issue while dragging (updating the element's position properties) within the panel. Upon further investigation with firebug I saw that there are 2 divs in particular which are overlayed over the content of the customscrollpanel which are contributing greatly to the performance issue. I deleted these two extra elements in firebug and saw that no functionality had been compromised with the panel and on top of the that the performance of the dnd improved drastically.

What I found in testing for the html generated for the CustomScrollPanel can be found below, I added my comments to add some identification.

My question is: does anyone know if there's a purpose for these DIVs, and if they are essential, is there a workaround so I can have custom scrollbars without impacting the dnd performance? And if they're not essential, why are they there?

Also I found that for every nested DIV between your click and your element to drag effects performance, are the 3 nested divs all necessary for custom scrollbar functionality?

Thanks so much for any help in advance, and sorry for the long post, I've just been trying to figure this out for the past week, a lot of hair pulled :).

-Seth

<div class="ScrollArea" style="position: relative; overflow: hidden; height: 600px;">
    <!-- this div is up to the upper left corner doing seemingly nothing at all -->
    <div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;">&nbsp;</div> <!-- I also found no purpose for this -->
    <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: -17px; bottom: -17px;"> <!-- DIV 1 -->
        <div style="position: absolute; overflow: scroll; left: 0px; top: 0px; right: 0px; bottom: 0px;"> <!-- DIV 2 -->
            <div class="GK40RFKDCB" style="position: relative; min-width: 20px; min-height: 20px;"> <!-- DIV 3 -->
                <!-- this div seems to be doing nothing but overlaying -->
                <div style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll;">
                    <div style="height: 1324px; width: 1458px;"></div>
                </div>
                <!-- this div seems to be doing nothing but overlaying -->
                <div style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll;">
                    <div style="width: 200%; height: 200%;"></div>
                </div>
                <div class="dragdrop-dropTarget dragdrop-boundary" style="position: relative; overflow: hidden;">
                    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed;">
                   
                    <div class="testRed dragdrop-draggable dragdrop-handle" style="position: absolute; top: 900px; left: 500px;">Hello World</div>
                </div>
            </div>
        </div>
    </div>
    <!-- this div is the corner box bottom right which comes up when both scrollbars are displayed -->
    <div style="position: absolute; overflow: hidden; right: 0px; bottom: 0px; width: 17px; height: 0px;">
        <div class="GK40RFKDII" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"></div>
    </div>
    <!-- this div seems to be the container for the bottom scroll bar but it is disabled if not horizontal scroll is needed -->
    <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; display: none;">
        <div class="GK40RFKDDJ GK40RFKDCB" style="height: 17px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
            <div class="GK40RFKDCJ GK40RFKDJI">
                <div class="GK40RFKDBJ"></div>
            </div>
        </div>
    </div>
    <!-- this is the div container for the scrollbar to the right -->
    <div style="position: absolute; overflow: hidden; top: 0px; right: 0px; bottom: 0px; width: 17px;">
        <div class="GK40RFKDAJ GK40RFKDCB" style="width: 17px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
            <div class="GK40RFKDPI GK40RFKDLI">
                <div style="height: 1224px;"></div>
            </div>
        </div>
    </div>
</div>