I’m recently working quite a bit with Silverlight 3 and here are a couple of weird problems I encountered. They are easy to solve, but I hope this post will save you some head scratching.
Gotcha #1 – Vertical scrollbar in IE8
When Visual Studio 2008 generates a test page for your Silverlight application, it creates an <object> tag with width and height set to 100%.
When you look at that page in any browser other than IE8 everything is working fine: the Silverlight control takes the whole page –no scrollbars. Now if you open your website in IE8 you may notice a vertical scrollbar and a small white space below your Silverlight control.
Let’s look at the html generated by Visual Studio. Near the end there are these lines:
76 </object>
77 <iframe id=’_sl_historyFrame’ style=’…‘></iframe>
78 </div>
79 </body>
80 </html>
Nothing suspect at first sight. However, the problem is right there: it seems that IE8 allocates some vertical space for the whitespaces/tabs/newlines between the closing tags.
The solution is easy: you can either remove the spaces/newlines:
77 <iframe id=’_sl_historyFrame’ style=’…‘></iframe></div>
78 </body>
79 </html>
or change the embedded style and set overflow to “hidden” instead of “auto”:
7 <style type="text/css">
8 html, body {
9 height: 100%;
10 overflow: hidden;
11 }
Gotcha #2 – “GET silverlight 3” Badge in Firefox 3.5
There is a neat way to pass startup parameters to Silverlight from the host html page. You can specify them inside the initParams tag. For example:
67 <object data="data:application/x-silverlight-2">
68 <param name="initParams" value="param_1=a; param_2=b" />
However, if you don’t have any parameter, you may be tempted to just leave the value attribute empty:
68 <param name="initParams" value="" />
Don’t do it. For some reason, Firefox 3.5 has a problem with that empty attribute and instead of loading your application will believe that the Silverlight runtime is not installed. Your page will show the nice “Install Silverlight” image and will not request any xap file.
The solution is again pretty simple: if you don’t have any parameter you can completely remove the whole tag or put in some random characters (assuming that they won’t mess with your Silverlight app). And no, a single space won’t work.
Pretty dumb, I know…