css3pie - scrollbars not working inside element with pie applied

Question

I have a container that I'm applying curved corners to with css3pie. Inside that element I have a table that is wider than the container. This causes scroll bars at the bottom of the container which is what I not only expect but need. The issue is that if I have applied css3pie to the container the scroll bar will not scroll when clicked and dragged. I can click on the arrows at both ends and it will scroll or I can click in the space where the scroll bar is not and it will jump to that place. So it only will not scroll when I click and drag the scroll bar.

If I comment out the bahaivor on the class for the container scrolling will work again. If I apply css3pie though javascript scrolling will break. If I remove the class from the container while pie is enabled as a behavior scrolling works.

I have also put the table inside another div inside the container with the same results.

I'm running in IE9 documents mode IE7

Is there any way to correct this issue?

score 0 · Answer 1 · answered Oct 02 '12 at 13:31

I did sort of what the last workaround did - detached the background from the scrolling content.

<div id="ContentContainer">
  <div id="ContentBackground"></div>
  <div id="Content">

  </div>
</div>

with the style

div#ContentBackground {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  behavior: url(PIE.htc);
}

I'd like to see a fix for this in an upcoming release, though, as this seems like it'd be a pretty common problem (layout with rounded edges with something scrolling inside)

score 0 · Accepted Answer · answered Mar 08 '12 at 19:23

So I never found an explanation about why this was happening. I believe that scrolling the content inside the page element with PIE applied would cause the style to be reapplied causing the "Behavior:" to be evoked and stopping the scroll event.

I ended up solving the issue by taking the content i needed to apply the scroll to our of the element with pie applied. In my case I was applying rounded corners to the container that the scroll bars were inside. I put a div above and below the content and applied the corner rounding to the top and bottom divs.

This way the scroll bars would work normally, and the rounded corners would be applied. Though yet again there was a work around for IE7.

css3pie - scrollbars not working inside element with pie applied

2 Answers2