Silverlight and Opera

Although Opera is not an officially supported browser (see my previous post for more details), we do want a good Silverlight experience for Opera users (and a good Opera experience for Silverlight developers). As such, we do some level of Opera testing and look at customer reported Silverlight/Opera issues. In general, the Silverlight experience in Opera works OK, with a few exceptions and one that's easy to correct: when hosting Silverlight in Opera via the MS AJAX Silverlight control. When doing this, the Silverlight control will correctly instantiate in Opera but the Silverlight content won’t load and you’ll see a blank page. The good news is this is reasonably easy to work-around and we are investigating the root cause of this issue (a bug has been logged to Opera on this issue and the Silverlight product team will look at it as well).

The bug is manifested in Opera when loading dynamic source when there is a dynamically set onload handler:

  <head>

  <script type="text/javascript">

    function pageLoaded() {

        var obj = document.getElementById('obj1');

        obj.OnLoad = xamlLoaded; // Remove and this works in Opera

        obj.Source = "source.xaml";

    }

    function xamlLoaded() {}

  </script>

  </head>

  <body onload="pageLoaded()">

  <object id="obj1" type="application/x-silverlight-2"/>

  </body>

This is the way the MS AJAX control needs to load Silverlight in order to integrate into the MS AJAX framework. The best way to work-around this issue is to replace the MS AJAX hosting with plain object tag hosting:

<body>

    <!-- Runtime errors from Silverlight will be displayed here.

    This will contain debugging information and should be removed or hidden when debugging is completed -->

    <div id="silverlightControlHost">

      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

        <param name="source" value="PATH_TO_YOUR_XAP.xap"/>

        <param name="background" value="white" />

        <param name="minRuntimeVersion" value="2.0.31005.0" />

        <param name="autoUpgrade" value="true" />

        <a href="https://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

          <img src="https://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

        </a>

      </object>

      <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

    </div>

  </body>