Hang Safari - PDF Object BUG

index.html

<div>
  When REMOVING an object tag safari does not like it hangs. 
  <br><br>
</div> 

<button id="inc">Increase Counter</button>&nbsp;<label id="counter">0</label><br>

<button id="crash">Make Safari Hang</button>

<div id="content"></div>

<div id="warn" style="display:none">
  <h2 style="border:1px solid red;padding:1em;">
    This test only works when not hosted inside an iframe. Copy it into a local html file for example
  </h2>
  <p>
    'Make Safari Hang' only works when directly hosted so the object tag will actually try to load a pdf viewer.
    E.g in JSFiddle it will just ignore that (inside the iframe)  
  </p>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
  	const inFrame = (window.location !== window.parent.location)
    
    if (inFrame) document.getElementById('warn').style.display = 'block'
  
    document.getElementById('crash').addEventListener('click', function() {
      var content = document.getElementById('content');
      content.innerHTML = '<object ref="builtin" type="application/pdf" style="position: absolute;z-index: -1;"><span></span></object>';
      
      setTimeout(() => {
      	content.innerHTML = 'Try increasing the number now'
			},1000)
    });
    document.getElementById('inc').addEventListener('click', function() {
      var counter = document.getElementById('counter');
      counter.innerHTML = parseInt(counter.innerHTML) + 1;
    });
  });  
</script>