css in chrome funziona solo dopo ispeziona elemento

Question

Sto usando il plugin JQuery flexslider per mostrare più elementi nel mio sito. Uso anche gli eventi JQuery .click() e gli effetti fadeIn() fadeOut() sugli elementi che applicano flexslider.

il mio sito sembra a posto in firefox, ma quando lo apro in chrome, le diapositive sono impilate in una pagina. ma ciò che mi confonde è che quando uso l'elemento inspect in chrome, imposta il layout giusto, proprio come in firefox.

qualcuno può spiegare cosa sta succedendo?

Modificato: bene dopo un po 'di ispezione, il layout cambia quando la larghezza/altezza viene modificata, quindi ecco il css io uso sull'elemento che non visualizza correttamente:

#content{ 
    width: 80%; 
    margin: 2% 10%; 
    padding: 3% 1%; 
    -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
      border-radius: 10px; 
    background-color: rgba(255,255,255,0.5); 
    -webkit-box-shadow: 0 2px 3px 0 #aaa; 
     -moz-box-shadow: 0 2px 3px 0 #aaa; 
     box-shadow: 0 2px 3px 0 #aaa; 
    } 
h2{ 
    width: 80%; 
    margin: 5% 10%; 
    color: #808080; 

    font-family: "Lobster", Arial; 
    font-weight: bold; 
    font-size: 5em; 

    line-height: 1em; 
    text-align: center; 
} 

il flexslider è posizionato all'interno di #content e all'interno delle diapositive sono elementi con i tag h2

Answer 1

a volte questo succede se ci sono errori nel css o html stesso.

Prova Assicurati di codice:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

o fornire il codice della pagina di scorrimento.

Answer 2

Ho avuto un problema simile in cui il css non caricherà dopo avevo .trigger ('click')

e caricato quando usato ispezionare elemento in cromo

ho risolto il problema di avere una pausa prima della .trigger ('click') viene attivato

ad esempio:

$('#workDone').click(function(){ 

      setTimeout(function(){$('#mefirst').trigger('click');}, 100); //providing delay to buffer load time of css 


      });