tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

FIX webfonts in preview iframe breaking admin fonts

Browse Source 
In IE8, when a page in the preview iframe uses a web font (not just
references it in CSS, but actually has glyphs present in the page),
the fonts in the containing admin interface will become corrupted
(display as all squares) until the mouse moves.

This commit uses the technique described at
http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes#10557782
to cause the admin panel to re-calculated all it's fonts
after the preview iframe has loaded, fixing the glitch
This commit is contained in:
Hamish Friedlander 2013-08-22 14:30:00 +12:00
parent afd3e3f0d0
commit 45c1d2b0ce
1 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
admin/javascript/LeftAndMain.Preview.js
View File

@ -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 = $(
'<style type="text/css" id="FontFixStyleElement" disabled="disabled">'+
':before,:after{content:none !important}'+
'</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('<div class="cms-preview-overlay ui-widget-overlay-light"></div>');
this.find('.cms-preview-overlay').hide();