diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js index 7856e9da5..3a0f76594 100644 --- a/admin/javascript/LeftAndMain.Preview.js +++ b/admin/javascript/LeftAndMain.Preview.js @@ -224,15 +224,31 @@ return this; }, + /** + * Return a style element we can use in IE8 to fix fonts (see readystatechange binding in onadd below) + */ + getOrAppendFontFixStyleElement: function() { + var style = $('#FontFixStyleElement'); + if (!style.length) { + style = $( + '' + ).appendTo('head'); + } + + return style; + }, + /** * Initialise the preview element. */ onadd: function() { - var self = this, layoutContainer = this.parent(); + var self = this, layoutContainer = this.parent(), iframe = this.find('iframe'); // Create layout and controls - this.find('iframe').addClass('center'); - this.find('iframe').bind('load', function() { + iframe.addClass('center'); + iframe.bind('load', function() { self._adjustIframeForPreview(); // Load edit view for new page, but only if the preview is activated at the moment. @@ -241,7 +257,17 @@ $(this).removeClass('loading'); }); - + + // If there's any webfonts in the preview, IE8 will start glitching. This fixes that. + if ($.browser.msie && 8 === parseInt($.browser.version, 10)) { + iframe.bind('readystatechange', function(e) { + if(iframe[0].readyState == 'interactive') { + self.getOrAppendFontFixStyleElement().removeAttr('disabled'); + setTimeout(function(){ self.getOrAppendFontFixStyleElement().attr('disabled', 'disabled'); }, 0); + } + }); + } + // Preview might not be available in all admin interfaces - block/disable when necessary this.append('
'); this.find('.cms-preview-overlay').hide();