Chrome adds whitespace to bottom of page after JQuery slideToggle

I created a pop up footer effect with jquery for www.brunodejonghe.be.

It works in FF, Safari, IE7+ and Opera. When I open the footer in Google Chrome, whitespace is added beneath the footer.

Does anybody have an idea what I can do about it?

thanks in advance!

JQuery script:

$('#contact').click(function() {
   <!-- show panel -->
   $("#contactpanel").slideToggle(1500);

   if ($activated == 1) {   
      $('#contact').html("<h4>Contacteer me</h4>");
      $('#contactpanel').css('height', $('#contactpanel').height() + 'px');
      $activated = 0;
   }
   else {
      $('#contact').html("<h4>Verberg</h4>");
      // fluid toggle
      $('开发者_运维百科#contactpanel').css('height', $('#contactpanel').height() + 'px');
      // scroll to bottom page for pop up footer effect 

      // detect opera and fix scroll bug 
      if ($.browser.opera == true)
      {
         $('html').animate({
            scrollTop:  $(document).height() -  $('#contactpanel').height() + 'px'
           }, 1500);
         $activated = 1;
      }
      else {
         $('html, body').animate({
            scrollTop: $(document).height() -  $('#contactpanel').height() + 'px'
         }, 1500);
         $activated = 1;
      }
   }
});

---

Putting overflow:hidden; onto the footer div, and removing the height:75px; from both #footer and #footer, .push solves the problem for me.

That said, I'd suggest a different solution entirely. Instead of animating the shift via JavaScript, I'd suggest creating a simple transition. Something along the lines of the following (untested) code:

CSS:

#contactpanel {
  overflow: hidden;
  max-height: 0px;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  ... /* and so on... */
}
#contactpanel.visible {
  max-height: 300px; /* Or so... */
}

JavaScript:

var contact = document.getElementById('contact');
var panel = document.getElementById('contactpanel');
contact.addEventListener('click', function(e) {
  panel.classList.toggle('visible');
});

Take a look at http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/ for a decent explanation of how transitions work, and how they might make your life a little simpler. :)