Chrome Version       : 61.0.3163.100
OS Version: 10.0
URLs (if applicable) :
Other browsers tested:
  Add OK or FAIL after other browsers where you have tested this issue:
     Safari 5:
  Firefox 4.x:
     IE 7/8/9:

What steps will reproduce the problem?
1. Objectives
    produce an overlay on a div
    overlay is  a div that contain a text like "page under construction";
    overlay css object passed to jquery
   		position: "absolute",
		display: "block",
		width: "100%",
		height: "100%",
		top: 0,
		left: 0,
                "background-color": "rgba(0,0,0,0.5)",
	        "z-index": 2,
	        cursor: "pointer"
   text in overlay css object passed to jquery
                position: "absolute",
		top: "10%",
		left: "40%",
		"font-size": "50px",
		color: "white",
		transform: "translate(-50%,-50%)",
		"-ms-transform": "translate(-50%,-50%)"

2.under debugger this sequence work well,  overlay is displayed with the text
    // div to overlay
    document.getElementById("fileDisplayArea").style.display = "none";
    // insert text in overlay
    $overlay.append($overlayText);
    // place overlay as first div in fileDisplayArea iv			
    $overlay.prependTo($('#fileDisplayArea').css("position", "relative"));
    // set overlay to be displayed
    document.getElementById("exceltohtml-overlay").style.display = "block";
    // display the parent div of ocerlay				
    document.getElementById("fileDisplayArea").style.display = "block";

3.when running in nominal mode no overlay  displayed

What is the expected result?


What happens instead of that?


Please provide any additional information below. Attach a screenshot if
possible.

UserAgentString: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36