css en cromo solo funciona después de inspeccionar el elemento

Question

Estoy usando el complemento de Flexslider JQuery para mostrar varios elementos en mi sitio. También utilizo el evento JQuery .click() y los efectos fadeIn() fadeOut() en los elementos que aplican flexslider.

mi sitio se ve bien en firefox, pero cuando lo abro en cromo, las diapositivas se apilan en una página. pero lo que me confunde es que cuando uso el elemento inspeccionar en cromo, establece el diseño correcto, como en Firefox.

¿alguien puede explicar lo que está pasando?

Editado: bien después de alguna inspección, el diseño cambia cuando se cambia la anchura/altura, así que aquí está el css que uso en el elemento que no se muestra correctamente:

#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; 
} 

la flexslider se coloca dentro de #content, y dentro de las diapositivas hay elementos con etiquetas h2

Answer 1

a veces esto sucede si hay errores en el css o html.

Trate comprobar que el código:

http://validator.w3.org/

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

o proporcionar el código de la página deslizante.

Answer 2

I tenían problema similar donde el css no se carga después de que tuviera .trigger ('clic')

y cargado cuando solía inspeccionar elemento en cromo

I resuelto el problema por tener una hacer una pausa antes de que el .trigger ('clic') se activa

por ejemplo:

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

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


      });