在chrome的底部留下空间

Question

This is a responsive design and transform: translateY(2000px); has been applied on the blocks at the bottom. The animation is working fine in Chrome, but the animation seems to leave a blank space at the bottom of the page. This happens only in Chrome.

Project Link:

http://50.87.144.37/~projtest/team/design/Call/

CSS:

.come-in {
  transform: translateY(2000px);
  -webkit-transform: translateY(2000px);
  animation: come-in 0.8s ease forwards;
  -webkit-animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
  -webkit-animation-duration: 0.6s; 
}

JS:

 (function($) {

      $.fn.visible = function(partial) {

      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

      };

    })(jQuery);

    $(window).scroll(function(d){

       $(".unWcalls").each(function(i, el) {
       var el = $(el);
    if (el.visible(true)) {
       el.addClass("come-in"); 
    } 
  });
});

Answer 1

The problem is that you push the elements down with translateY(2000px) and then pull them straight back up with translate(0px) . Chrome therefore leaves a place for them at the bottom if that makes sense. This jsFiddle demonstrates the problem. (I didn't bother with all the vendor prefixes).

Instead, translate them down by default and pull them up on scroll, like so .

If it still prooves buggy, animate margin-top or top on absolute position . Translate doesn't affect page layout as much and is better for performance, but that's part of your problem, right?

on a different note, a few issues I found:

1. The performance of your javascript here would be terrible. Every time the user scrolls up or down, even after all the animations are completed, you run this function to check the position. I'm sure you can refactor it a lot.
2. You have to also consider users with javascript disabled. Currently there's nothing presented on the page.
3. I think there's a min width set on your search box and it jots out of it's border on narrow screens.

Answer 2

You can try below code:

Change position relative to static and check may be it will work fine.

.sitewid {
    margin: 0 auto;
    position: static;
    width: 960px;
}

Good Luck....