lascia spazio in basso su cromo

Question

Questo è un design reattivo e transform: translateY (2000px); è stato applicato sui blocchi nella parte inferiore. L'animazione funziona bene in Chrome, ma l'animazione sembra lasciare uno spazio vuoto nella parte inferiore della pagina. Questo succede solo in Chrome.

Progetto 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

Il problema è che si spingono gli elementi verso il basso con translateY(2000px) e poi tirare subito indietro con translate(0px). Chrome quindi lascia un posto per loro in fondo se questo ha un senso. Questo jsFiddle dimostra il problema. (Non mi sono preoccupato di tutti i prefissi del venditore).

Invece, tradurli in giù per impostazione predefinita e tirarli su scroll, like so.

Se continua a funzionare con il buggy, animare margin-top o top on absolute position. La traduzione non influisce più sul layout di pagina ed è migliore per le prestazioni, ma fa parte del tuo problema, giusto?

su una nota diversa, alcuni problemi che ho trovato:

1. Le prestazioni del vostro javascript qui sarebbe terribile. Ogni volta che l'utente scorre verso l'alto o verso il basso, anche dopo aver completato tutte le animazioni, si esegue questa funzione per controllare la posizione. Sono sicuro che puoi refactoring molto.
2. Devi considerare anche utenti con javascript disabilitato. Attualmente non c'è nulla di presentato sulla pagina.
3. Penso che ci sia una larghezza minima impostata sulla casella di ricerca e che esca dal suo bordo su schermi stretti.

Answer 2

Si può provare sottostante Codice:

Cambia posizione rispetto a statico e potrebbe essere che funzioni correttamente.

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

buona fortuna ....