Silverlight Web Part not loading until user clicks

I am maintaining a Silverlight 4 application that runs as Web Part in SharePoint. However, I have an issue with loading it in Internet Explorer (versions 10 & 11). The user must click on the web page or hit tab for the Silverlight web part to actually load. However, this is not an issue in Chrome. There is a silverlight.js script runs when the page initially loads, but it appears (in Fiddler) that the XAP isn't getting called until the user clicks or or hits tabs on the page. So far, I have tried loading the page with and without ActiveX. Also I have tried running the page with my own JavaScript file to click and put focus on various elements in the page, but so far no luck.

I noticed this issue was briefly referenced in a comment on the following Stack Overflow question: Why won't my Silverlight Application load in Internet Explorer?, but I have yet to come across any resolution to this particular issue.

Any suggestions?

I've read if you set the height and width of the object tag or remove the object tag from its DIV container that this can solve the issue. If this is easier for you, then you might want to try this first.

However, I solved the issue with a little javascript. I used JQuery, but you could probably do something similar with pure javascript.

This is what my code looked like before the modification:

<div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="silverObj">
          <param name="source" value="../MySilverlightApp.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="4.0.50826.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://www.microsoft.com/getsilverlight/get-started/install/default.aspx" style="text-decoration:none">
              <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object>
       <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

This is what the modified code looks like, basically I just removed all the content from the #silverlightControlHost DIV and then put all the content back into the DIV after the page load via JQuery:

<script type="text/javascript">
  $(document).ready(function() {
    $("#silverlightControlHost").html("<object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='100%' id='silverObj'><param name='source' value='../MySilverlightApp.xap'/><param name='onError' value='onSilverlightError' /><param name='background' value='white' /><param name='minRuntimeVersion' value='4.0.50826.0' /><param name='autoUpgrade' value='true' /><a href='http://www.microsoft.com/getsilverlight/get-started/install/default.aspx' style='text-decoration:none'><img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style:none'/></a></object><iframe id='_sl_historyFrame' style='visibility:hidden;height:0px;width:0px;border:0px'></iframe>");
  });
</script>

<div id="silverlightControlHost">

</div>

For reference, I did not see this issue on IE 8 but then on IE 11 using the same version of SharePoint, same version of Silverlight, same code, same everything I was having the issue that the Silverlight control would not load until you click on the empty space where it should be. After I clicked on it, everything would load just fine. I first tried to click on the object using JQuery, but that did not work. It required an actual user to click on it, not a programatic click. The above Javascript/JQuery solution solved this issue and now it loads when the page loads as it did in IE 8. I also tested this fix in both IE 8, IE 11, and Chrome Version 42.0.2311.90 m (64-bit). My Silverlight app is loading in a web part on a Sharepoint 2010 site.