Hi All,



I have custom JavaScript in a survey which allows us to have PDF's pop out as modal windows in the current survey. Ive included a sample of the HTML, the JavaScript, and the entire code we've put into the header.



I am not a web developer and just figured this out using trial and error, and similar cases to mine. It's working well on Chrome and on Firefox. On Safari 12.1 (and not earlier versions), we have a whitespace error where a fieldset element is automatically set to the height of the source images. This makes users have to scroll down an enormous amount before proceeding with the survey. I tried to write some code that would detect viewport size and re-size the fieldset accordingly, but the complexity is getting away from me.



One clue: On Safari, the whitespace error occurs. When I click "developer tools" and the toolbox opens in the browser, Safari fixes the whitespace error itself. Then, when I close developer tools, it remains fixed.



Does anybody have an idea why Safari is giving a huge height CSS value to the fieldset element? Every browser uses the fieldset, but only Safari sets the height so high.



Thanks!



The HTML

< a id="KY_A">here</a>< img id="dialog1" title="Drag border to expand size" src="https://i.imgur.com/s0ZkMam.png" >



The JavaScript

Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery( "#KY_A" ).click(function() {

Qualtrics.SurveyEngine.setEmbeddedData('KY_A', '1');

jQuery("#dialog1").dialog( "option", "modal", true );

jQuery("#dialog1").dialog( "open" );

});



The Code In The Header

<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script> jQuery("[id*='dialog']" ).dialog({ autoOpen: false}); jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog']").dialog('close'); }); jQuery('.SystemEndOfSurvey').text('this is the update'); </script>