dummy.html and dummyStyles

[chrismay_at_delta]

I have noticed for a while that Captivate creates and loads a dummy.html file into the SCORM package. When viewing the Javascript console, I sometimes see the dummy.html load up and then disappear from the DOM. I never paid much attention to it, because it never caused any issues.

I have recently published a lesson that does not work on Safari on the iPad. When I look at the JS Console, I can see that a "dummyStyle" style tag is being added an removed constantly on this lesson. As far as I can tell, this lesson is no different than the other 20 lesson that I have created and published at the same time.

In Chrome, this happens about every 20-30 seconds. In Safari, the adding and removing of this tag is happening constantly, so much that the Elements viewer is a constant flicker. I am thinking that this is what causes the lesson to not work on the iPad. 

Has anyone expereinced this? Does anyone have any more insight into the dummy.html and dummyStyle?

I am on a Mac:

OS: 10.14.6

Captivate: 11.5.1.499

I know I am not on the latest verson fo Captivate, but this is the latest that our IT has available for us. I have published over 100 lessons with this version and have not seen this issue before.

Thanks!

[chrismay_at_delta · Accepted solution]

I found a solution to this issue if anyone else comes across the issue. I found in CPM.js a bit of  code that says if an element id of dummyStyle does NOT exitst, to add it. Elsewhere, I assume, the element is removed. To work around that, I manualled added the element to the dom.

In the index_scorm.html there is some Javascript, like below, that lays out most of the basic HTML shell of the lesson.   I added <style id='dummyStyle'></style> to the end of the text inside the quotes and my problem was solved.

document.body.innerHTML = " <div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' > <div id='main_container' style='top:0px;position:absolute;'> <div id='projectBorder' style='top:0px;left:0px;position:absolute;display:block'></div> <div class='shadow' id='project_container' style='left: 0px; top:0px;position:absolute;' > <div id='project' class='cp-movie' style='width:1112px ;height:719px '> <div id='project_main' class='cp-timeline cp-main'> <div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:1112px ;height:719px ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div> <canvas id='slide_transition_canvas'></canvas> </div> <div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'> <img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/> <div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div> </div> <div id='cc' style='left:0px; float:left;position:absolute;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'> <div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'> <p style='margin-left:8px;margin-right:8px;margin-top:2px;'> </p> </div> <div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:0px; float:right;position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'> </div> </div> </div> <div id='toc' style='left:0px; float:left;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'> </div> <div id='playbar' style='left:0px; float:left;position:absolute'> </div> <div id='gestureIcon' class='gestureIcon'> </div> <div id='gestureHint' class='gestureHintDiv'> <div id='gImage' class='gesturesHint'></div> </div> <div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> <div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> </div> </div></div><div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'> <table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'> <tr style='width:100%;height:100%;text-align:center;vertical-align:middle'> <td style='width:100%;height:100%;text-align:center;vertical-align:middle'> <image id='preloaderImage'></image> <div id='loadingString' class='loadingString'>Loading...</div> </td> </tr> </table></div> <div id='initialLoading'></div><style id='dummyStyle'></style>";