jQuery UI dialog around iframe; performance issues?

Question

I'm making a jQuery UI dialog around an iframe element and the performance of doing so is severely affected. The issue appears when you move the dialog around too fast which causes your mouse to go over the iframe element, the entire page will hang for a moment and cause a notable slowdown. I have read about the iframe capturing mouse events which is causing the slow down but I cannot seem to determine the exact issue. I tried to capture mousemove and mouseover and prevent default behaviour, no luck.

Any pointers to get the performance back on track would be appreciated! Also note that I'm using Webkit and don't care about compatability with other browsers.

Answer 1

I just ran into these performance issues myself. When dragging or resizing the dialog the mouse will usually go over the iframe. Those events are captured by the iframe resulting in laggy behavior, as you mentioned.

jQuery draggable provides an "iframeFix" option which places a transparent div over iframes while dragging. The dialog plugin does not provide this fix. Looking at the jquery-ui code for the iframefix I was able to adapt it to solve the performance issues for my dialogs. Adding something similar to your dialog drag and resize start/stop options should do the trick:

$(selector).dialog({
  dragStart: function (event, ui) {
      $('iframe', this).each(function() {
          $('<div class="ui-draggable-iframeFix" style="background: #FFF;"></div>')
          .css({
              width: '100%', height: '100%',
              position: 'absolute', opacity: '1', zIndex: 1000, overflowX: 'hidden'
          })
          .css($(this).position())
          .appendTo($(this).offsetParent());
      });
  },
  dragStop: function (event, ui) {
      $("div.ui-draggable-iframeFix").each(function() {
        this.parentNode.removeChild(this); }); //Remove frame helpers
      }
});

I've modified the code so the transparent div will resize with the dialog and it is positioned relative to the dialog container vs. the window. That might need more tweaking. Ideally you'd just extend the dialog plugin to handle these options. I'll do that sometime soon.

This post on the jQuery forums provided me the pointer to the draggable plugin fix.