.jScrollPaneDrag{Top,Bottom} overlap .jScrollPaneDrag - bad for transparency

[GoogleCodeExporter]

What steps will reproduce the problem?

1. Style the drag to use transparent PNGs

What is the expected output?

The top, "middle" and bottom areas of the drag should be separate so that 
their opacities/transparencies do not interfere.

What do you see instead?

The top and bottom areas overlap the main drag area, which results in 
transparencies of their background images interfering with transparencies 
of the main drag area's background image.

What version of the jScrollPane are you using?

The one downloaded directly from the homepage.
* $Id: jScrollPane.js 90 2010-01-25 03:52:10Z kelvin.luck $

Original issue reported on code.google.com by rula...@gmail.com on 18 Feb 2010 at 3:08

[GoogleCodeExporter]

Please fix this one ASAP. The current workaround (inserting another div into 
the drag) fails with reinitialiseOnImageLoad because the drag element is 
recreated. This is a real pain.

Alternatively, please provide an after-reinit callback.

Original comment by rula...@gmail.com on 11 Aug 2010 at 11:31

[GoogleCodeExporter]

I will try to address this in the forthcoming rewrite of jScrollPane (nearly 
ready for releae)

Original comment by kelvin.l...@gmail.com on 12 Aug 2010 at 8:37

• Changed state: Accepted

[GoogleCodeExporter]

Meanwhile I found a CSS-only workaround that works with rOIL and should work 
with recent versions of most browsers. It uses [-vendor-]background-clip. 
Unfortunately it doesn't degrade gracefully.

.jScrollPaneDrag {

    /* ... */
    overflow: visible;
    background: url('middle.png');
    border-top: solid transparent 10px;
    border-bottom: solid transparent 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-clip: padding-box;
    -moz-background-clip: padding;
}

.jScrollPaneDragTop {

    position: absolute;
    top: -10px;
    width: 100%;
    height: 10px;
    background: url('top.png');
}
.jScrollPaneDragBottom {

    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 10px;
    background: url('bottom.png');
}

Original comment by rula...@gmail.com on 12 Aug 2010 at 10:16

[GoogleCodeExporter]

I have just announced the beta of a completely rewritten version of jScrollPane:

http://groups.google.com/group/jscrollpane/browse_thread/thread/c1bc1bf63e3f80d8

Please test and reply on the list if you are still having this issue,

Thanks,

Kelvin

Original comment by kelvin.l...@gmail.com on 17 Aug 2010 at 4:16

• Changed state: Fixed