Boite Dialog JQuery UI et Google Chrome

voici ce qui se passe en image.
sur mon ecran 24" 1920x1200 je simule des résolutions plus faibles.

si la fenêtre du document est trop petite au chargement je fais apparaître une boite de dialogue, ça marche avec IE, Firefox (image1).

avec Google Chrome, le dialog fonctionne, mais la fenêtre elle même est 'hors champ' on ne voit que l'overlay (image2).
Si je tire sur le bas de la fenêtre pour l'agrandir, je voir apparaître péniblement un bout de la boite de dialogue, en haut ... (image 3)

voici en gros mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
$(document).ready(function() 	// le document est chargé
	{
	  var dialogOpts = {
	  title: '<a class="closeDialogUi" href="#">Fermer la fen&ecirc;tre ...</a>',
	  width: 300,
	  height: 120,
	  position: ["center"],
	  modal:true,
	  autoOpen: false
	  };
	  //crée la boite de dialogue
	  $("#dialog_1").dialog(dialogOpts);
	  $(".closeDialogUi").click(function()
		  {
		  $("#dialog_1").dialog("close");	
		  $("#dialog_1").dialog("destroy");	
		  });	
/*----------------------------------*/	
	var checkHeight = function()
	{
	  var $myDiv = jQuery('#myDiv');
	  var $results = jQuery('#results');
	  var $windowH = jQuery(window).height();
	  var $windowW = jQuery(window).width();
	  var $multip = 80;
 
 
	  			if ($windowH <= 720)	{ 
					$multip = 92;		// petit écran, on réduit la marge
					 }
		   	  $bodyH = Math.floor(($windowH * $multip) /100);
			  	if ($bodyH < 560)	{ $bodyH = 560 }
			  	if ($bodyH >= 620 && $bodyH < 630)	{ $bodyH = 620 }  // clarifier cette ligne
		   	  $bodyW = Math.floor(($windowW * 80) /100);
			  	if ($bodyW > 1200)	{ $bodyW = 1200 }
			  	if ($bodyW <  900)	{ $bodyW =  900 }
 
/* ----------------------------------------------- */
 
 
			  jQuery($results).html(''); 
			  jQuery('<p>window height: ' + $windowH + '</p>').appendTo($results); 
			  jQuery('<p>window witdh: ' + $windowW + '</p>').appendTo($results); 
			  jQuery('<p>screen height: ' + screen.height + '</p>').appendTo($results); 
				$("#body").css("background", "#f00");
				$("#body").css("height", $bodyH + "px");
				$("#body").css("width", $bodyW + "px");		
			  jQuery('<p>#body height: ' + jQuery("#body").css("height") + '</p>').appendTo($results); 
			  jQuery('<p>#body width: ' + jQuery("#body").css("width") + '</p>').appendTo($results); 
 
 
 
	  // ----------------------------------------------centrage vertical	  
	  //$("#body").css("margin-top","8px");	/* --- force la marge avant redim */ 
	  var $diff = $windowH - $("#body").outerHeight();
		  if ($diff >= 0 )
		  {
		  $("#body").css({"margin-top": ($diff / 2) +"px"});	
		  } else {
		  $("#body").css({"margin-top":"8px"});	
		  }
	  // ---------------------------------------fin du centrage vertical	  
	} //----------------------------------  fin fonction checkHeight	
 
 
 
	var tooSmall = function()
	{
		if (jQuery(window).height() <= 720)
		{
		  $("#dialog_1").dialog("open");	// écran d'avertissement
		}
	}
 
	checkHeight();
	tooSmall();
	$(window).resize(checkHeight);
 
 
 
 
});				// fin du document.ready