jquery animate removes scroll in div for IE

Question

Right now I'm getting this strange problem where when I use jQuery's animate() function on a <div> it removes the ability to scroll. I'm adjusting the height with animate(). This problem only comes up with IE and works fine with Chrome and FF.

Below is my css class for my div

div.fullscroll{

  height: 65%;
  width: 75%;
  overflow-x: hidden;
  overflow-y: scroll;
  border-top: 1px solid #347235;
  border-bottom: 2px solid #347235;
  border-right: 2px solid #347235;
  border-left: 2px solid #347235;
  -moz-border-radius-topleft:     .1em;
  -moz-border-radius-topright:    .1em;
  -moz-border-radius-bottomright: .2em;
  -moz-border-radius-bottomleft:  .2em;
  border-top-left-radius: .1em;
  border-top-right-radius: .1em;
  border-bottom-right-radius: .2em;
  border-bottom-left-radius: .2em;
  background-color: #FFF;
  padding: 0px;
  margin: 0px auto;
  position:relative;
}

Here is my JS Jquery animate where <div id='main'>

$('#main').animate({
            height: "40%"
          }
          ,"slow");

After the animate is finished the <div> tag no longer has the ability to scroll. I'm completely stumped on this and was wondering if anybody had an idea.

(Once again this only happens in IE)

Answer 1

I'm guessing that this might be IE's problem with setting percentage heights (ref). Try changing the height to a pixel value and see it if works.

Also, is #main and .fullscroll the same div?

Answer 2

I was able to fix this using a quick workaround. After the animation is finished I add the overflow property back to the element.

like

$('#main').animate({
       height: "40%"
     },function(){
       $('#main').css('overflow-y','scroll');
     }
);