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');
     }
);