display: flex se convierte aleatoriamente en display: bloque con jquery hide / show y google webfont

Estoy obteniendo resultados impnetworkingecibles cuando llamo a jquery's css("display") en un elemento; a veces es flex , otras veces es block . Lo extraño es que este error solo está presente cuando uso el show / hide jquery, y el error ocurre aproximadamente el 50% del time. Lo que es aún más extraño es que estoy viendo estos resultados antes de hide incluso ejecuciones.

Actualización: parece estar también relacionado con este google webfont css que estoy incluyendo. Si elimino la fuente, el problema desaparece. Esto es todo muy extraño.

Aquí hay una simplificación de mi código:


js:

 $(document).ready(function () { console.log("1 display: " + $("#foo").css("display")); $("#foo").hide(); console.log("2 display: " + $("#foo").css("display")); $("#foo").show(); console.log("3 display: " + $("#foo").css("display")); }); 

html:

 <!DOCTYPE html> <html> <head> <title>Test</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/JavaScript" src="script.js"></script> <link href='http://fonts.googleapis.com/css?family=Forum' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="foo" class="centerer"> <p>Hello!</p> </div> </body> </html> 

css:

 #foo { background: white url("bg.jpg") center no-repeat; background-size: 100vw auto; } .centerer { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } 

El comportamiento correcto debería imprimirse:

 1 display: flex 2 display: none 3 display: flex 

Pero lo que estoy viendo aproximadamente el 50% del time es:

 1 display: block 2 display: none 3 display: block 

¿Alguna idea sobre lo que podría estar causando esto? Quiero saber por qué .

En su mala salida, su valor inicial de visualización es bloque . Esto no es un error con el método show.

¿Estás seguro de que tu script se ejecuta después del cálculo de CSS?

Verifica la estructura de tu documento:

 <!DOCTYPE html> <html> <head> <!-- css include/import --> </head> <body> <!-- html body --> <!-- script include/import --> </body> </html> 

EDITAR: de acuerdo con http://api.jquery.com/hide/ hide saveá el estado anterior. Pero como parece, no está funcionando en tu caso. Solución:

js

 $(document).ready(function () { console.log("1 display: " + $("#foo").css("display")); $("#foo").addClass('hideFlex'); console.log("2 display: " + $("#foo").css("display")); $("#foo").removeClass('hideFlex'); console.log("3 display: " + $("#foo").css("display")); }); 

css:

  .hideFlex{ display:none; } 

Reemplace el js con mi js y agregue .hideFlex a su CSS. Debería funcionar entonces

Tu código funciona en la versión más reciente de jquery

IMO sea cual sea el problema, recae en su código (tal vez incluso el CSS) configurando esa pantalla para bloquear en algún momento y no se está dando count.

JS FIDDLE

enter image description here

Intenta usar addClass y removeClass. Ocultar y mostrar establece el valor para bloquear.

 .flex { display: flex; } $('selector').addClass('flex'); //show $('selector').removeClass('flex'); //hide 

Para que las funciones JQuery hide () y show () funcionen correctamente (mantener el valor de visualización original), el elemento debe ser parte del DOM en el momento en que se llama a la function. Tal vez Google Webfonts descarga temporalmente su contenido de DOM …

El problema puede reproducirse así:

https://jsfiddle.net/u442nsko/1

 #foo { display: flex; } $(document).ready(function () { var my = $("<div id='foo'>......</div>") console.log("1 display: " + my.css("display")); my.hide(); console.log("2 display: " + my.css("display")); my.show(); console.log("3 display: " + my.css("display")); $("body").append(my); console.log("4 display: " + my.css("display")); });