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

Closed
KyleAlanDavis opened this Issue Dec 16, 2011 · 19 comments

Projects

None yet

9 participants

@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
leopic commented Dec 28, 2011

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
ghost commented Feb 17, 2012

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
Owner
lojjic commented Feb 27, 2012

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

@q13
q13 commented Feb 29, 2012

I meet the same problem in IE7 with beta5

@nwilcox
nwilcox commented Mar 26, 2012

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
Owner
lojjic commented Mar 26, 2012

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

@leopic
leopic commented Mar 27, 2012

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

@lojjic
Owner
lojjic commented Mar 28, 2012

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 lojjic added a commit that referenced this issue Mar 28, 2012
@lojjic Add -pie-track-active:false flag to prevent toggling the active class…
… name on mousedown/up on a case by case basis. This can be used to avoid the IE6-7 bug where you couldn't drag the scrollbar of a descendant. Fixes issue #190.
ad253e8
@lojjic lojjic added a commit that referenced this issue Mar 28, 2012
@lojjic Add -pie-track-active:false flag to prevent toggling the active class…
… name on mousedown/up on a case by case basis. This can be used to avoid the IE6-7 bug where you couldn't drag the scrollbar of a descendant. Fixes issue #190.
29edda0
@lojjic
Owner
lojjic commented Mar 28, 2012

@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
balu980 commented Mar 29, 2012

that is cool and it will work.

thx for addressing this issue.

@leopic
leopic commented Mar 29, 2012

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

Thank you Jason.

@Igor10k
Igor10k commented May 2, 2012

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

@bojall
bojall commented May 3, 2012

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
Owner
lojjic commented May 3, 2012

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

@bojall
bojall commented May 3, 2012

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

@lojjic
Owner
lojjic commented May 16, 2012

This is in the 1.0.0 release; closing.

@lojjic lojjic closed this May 16, 2012
@leopic
leopic commented May 16, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment