pozostawia miejsce na dole na chromie

Question

To jest responsywny projekt i transform: translateY (2000px); został zastosowany na blokach u dołu. Animacja działa poprawnie w Chrome, ale animacja wydaje się pozostawić puste miejsce u dołu strony. Zdarza się to tylko w Chrome.

Projekt 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

Problemem jest to, że elementy wcisnąć w dół z translateY(2000px) a następnie pociągnij je prosto z translate(0px). Dlatego Chrome pozostawia dla nich miejsce na dole, jeśli ma to sens. Ta jsFiddle demonstruje problem. (Nie zawracałem sobie głowy wszystkimi prefiksami sprzedawcy).

Zamiast tego przetłumaczyć je domyślnie i przeciągnąć na przewijane, like so.

Jeśli nadal zawiera błędy, uruchom animację margin-top lub top on absolute position. Tłumaczenie nie ma wpływu na układ strony i jest lepsze dla wydajności, ale jest to częścią twojego problemu, prawda?

na innej notatki, kilka problemów znalazłem:

1. Wydajność JavaScript tutaj byłoby straszne. Za każdym razem, gdy użytkownik przewija w górę lub w dół, nawet po zakończeniu wszystkich animacji, uruchamia się tę funkcję, aby sprawdzić pozycję. Jestem pewien, że możesz to bardzo dużo poprawić.
2. Należy również rozważyć użytkowników z wyłączonym javascript. Obecnie nic nie jest prezentowane na stronie.
3. Wydaje mi się, że w polu wyszukiwania jest ustawiona minimalna szerokość, a na wąskich ekranach wyskakuje z niej granica.

Answer 2

Można spróbować poniżej kodu:

Zmień położenie względem statycznego i sprawdź, czy zadziała prawidłowo.

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

Powodzenia ....