behavior applied to parent element prevents scrolling in child divs in IE6/7

[KyleAlanDavis]

I have a child div with defined height so that it scrolls vertically contained in a parent div that has rounded corners or dropshadow applied through PIE. In IE6 or IE7 the scroll bar flickers and you can't grab the bar to move it up or down.

I have found others with this issue at http://css3pie.com/forum/viewtopic.php?f=3&t=1290

[leopic]

Same issue here, not sure about IE6, we don't support it, but can confirm this happens in IE7.

[WilliamVercken]

Same issue here for IE7 !
it seems that there was not this problem in the beta 4

[ghost]

Same issue here for IE7. Specifically, these are the problems:

1. User cannot click on the scrollbar handle to drag it down. User CAN click in the empty part of a scroll bar to shift down multiple rows at a time.
2. Clicking and holding on the up/down arrows only moves the content down one notch. Normal IE behavior is to keep scrolling as long as the mouse button is held down.

[lojjic]

Another report, with testcase: http://css3pie.com/forum/viewtopic.php?f=3&t=1562

[q13]

I meet the same problem in IE7 with beta5

[nwilcox]

I'm also experiencing this bug in IE8 and IE9 as described by :kkalitowski:

PIE is a wonderful plugin but this bug will have a significant impact on whether I can use it in my site as I had hope.

Is there an update on this?

[lojjic]

@nwilcox I hope to look into this issue soon, it's on my short list for fixing for the 1.0 release.

[leopic]

that sounds like great news, can you post the hash over here so I can lend a hand testing?

[lojjic]

From user Balasubramanian in the forums, so I don't lose it:

"1. I think the issue is due to updating the class name on click of the container
addListener( el, 'onmousedown', mousePressed );
the movement I remove the listener it works
2. or may be the delay timmer before adding the classname. can we try sing the setTimeout to add the classname. instd of the while loop.
"

[lojjic]

@leopic and others - see the commit above.

The issue is that in order to support :active styling, PIE adds a mousedown listener after which it adds a "pie_active" class to the element, which triggers a style update. It seems that the act of adding this class cancels the drag operation on the descendant's scrollbar.

Since I want to maintain :active styling support, I've opted to add a new custom CSS flag you can set:

-pie-track-active: false;

If you set this then the listener will not be attached, and the scrollbars will work as expected.

Please test this if you are able to do a build. It's been added to both the 1.x branch and master.

[balu980]

that is cool and it will work.

thx for addressing this issue.

[leopic]

The fix works perfectly in IE7, solved a long outstanding issue in our project.

Thank you Jason.

[igor10k]

Works in IE7 for me too! Finally nailed it! Thanks

[bojall]

I've added the fix but am still experiencing the issue in IE7. Can you check and make sure I'm doing it correctly?

The "vinDynamicInfoPanel" has rounded corners and a drop shadow. "vehicleEvents" within it will have a vertical scroll once the max-height is reach. Everything looks and works good, except for not being able to drag the vert scroll bar .

.vinDynamicInfoPanel
{
width: 350px;
background: #fff;
margin-bottom: 10px;
padding-bottom: 7px;
border: 1px solid #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #BBB;
-webkit-box-shadow: 2px 2px 3px #BBB;
box-shadow: 2px 2px 3px #BBB;
-pie-track-active: false;
behavior: url(../script/PIE.htc);
}
.vehicleEvents
{
max-height:300px;
width:100%;
overflow:auto;
position:relative;
}

     <asp:Panel ID="panVehicleEvents" runat="server" class="vinDynamicInfoPanel">
        <div class="header">
            <div class="left">
                &nbsp;</div>
            <div class="middle">
                <asp:Label ID="vml_lblVehicleEvents" runat="server">Vehicle Events</asp:Label></div>
            <div class="right">
                &nbsp;</div>
        </div>
        <div class="vehicleEvents">
            <asp:Repeater runat="server" ID="rptrVehicleEvents">
                <ItemTemplate>
                    <div class="row ">
                        <div class="id">
                            <asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdVehicleEventID")%>'></asp:Label>
                        </div>
                        <div class="event">
                            <asp:Label ID="Label2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdEvent")%>'></asp:Label>
                        </div>
                        <div class="datetime">
                            <asp:Label ID="Label4" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdWorkDate")%>'></asp:Label>
                        </div>
                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <div class="row alt">
                        <div class="id">
                            <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdVehicleEventID")%>'></asp:Label>
                        </div>
                        <div class="event">
                            <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdEvent")%>'></asp:Label>
                        </div>
                        <div class="datetime">
                            <asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdWorkDate")%>'></asp:Label>
                        </div>
                    </div>
                </AlternatingItemTemplate>
            </asp:Repeater>
        </div>
    </asp:Panel>

[lojjic]

@bojall Are you using a custom build from the latest 1.x code? This feature does not exist yet in the released version.

[bojall]

I'm not. How do I go about doing that?

[igor10k]

@bojall http://css3pie.com/documentation/building-pie-from-source/

[lojjic]

This is in the 1.0.0 release; closing.

[leopic]

yayyy! 1.0, congrats and thank you for your work Jason :)