Issues with rendering in EPiServer preview-tab

I have noticed that several JavaScript features added to your Page Templates malfunction in the preview-tab in edit mode. It appears that it is a larger issue in Internet Explorer and most editors uses IE (because that is the only browser with a rich text editor prior to EPiServer 6).

The root cause of this problem is related to the fact that the jQuery ready handler or the onload-event of the page you want to preview is triggered while the preview iframe is hidden.

So, executing JavaScript at this stage triggers a whole set of problems. I suspect that since the loaded page is invisible, IE does not give you the correct values for elements layout (failure in retrieving correct height and errors in size calculations).

But jQuery works well with iframes! Why not in EPiServer CMS preview-tab?

There is a css class previewframe in system.css that has "display: none" which makes the iframe hidden from start. The iframe element then gets an inline style with a height and “display: block” _after_ the page is loaded into the iframe and events are executed.

Workarounds

If you want to patch EPiServer, remove "display: none" from css class "previewframe" in system.css. You will find this file in your Program Files folder and it will affect all sites.

Another way is to delay execution of the ready handler in edit mode. It is really dirty and ugly but it solves most problems.

<script type="text/javascript"> 
  <asp:Placeholder runat="server"> 
    $().ready( 
    <%= (Request["idkeep"] != null) ? "function() { setTimeout(" : "" %> 
      function(){ $('#equalize').equalHeights(); $("#ctl00_ContentContainer").equalHeights(); } 
    <%= (Request["idkeep"] != null) ? ", 500 )}" : "" %> 
    ); 
  </asp:Placeholder> 
</script>

Do you have better suggestions? I’m eager to hear them!

Update: This affects sIFR, Google Maps, jQuery plugins like jCarousel, equalHeights, etc. Logged as Bug #56651: Content in preview-tab in edit mode has rendering issues.