Skip to content
This repository

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

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

9 participants

Kyle Davis Jason Johnston Leo Picado William Vercken de Vreuschmen q13 nwilcox Balasubramanian Igor bojall
Kyle Davis

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

Leo Picado

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

William Vercken de Vreuschmen

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

Deleted user

The content you are editing has changed. Reload the page and try again.

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.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Jason Johnston
Owner

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?

Jason Johnston
Owner

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

Leo Picado

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

Jason Johnston
Owner

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.
"

Jason Johnston lojjic referenced this issue from a commit March 27, 2012
Jason Johnston 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
Jason Johnston lojjic referenced this issue from a commit March 27, 2012
Jason Johnston 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
Jason Johnston
Owner

@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.

Balasubramanian

that is cool and it will work.

thx for addressing this issue.

Leo Picado

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

Thank you Jason.

Igor
Igor10k commented May 02, 2012

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

bojall
bojall commented May 03, 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>
Jason Johnston
Owner
lojjic commented May 03, 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 03, 2012

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

Jason Johnston lojjic closed this May 16, 2012
Jason Johnston
Owner
lojjic commented May 16, 2012

This is in the 1.0.0 release; closing.

Leo Picado
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
Something went wrong with that request. Please try again.