Currently facing a bug that needs resolution, the issue has been identified but unsure of the solution.
An iFrame is loaded with content via jQuery like this:
var content = {{ json_encode($template) }};
$('#preview-iframe').contents().find('html').html(content);
View it in action: http://jsfiddle.net/9aV8v/
The form elements used are as follows:
<select name="ccpick" data-obj=".custom-color-1" class="fontpick">
<option value="Verdana">Verdana</option>
<option value="NeutraText-Book">NeutraText-Book</option>
<option value="Arial">Arial</option>
</select>
Works correctly on: http://jsfiddle.net/K9pL7/
The challenge arises when setting default font, color, or size on some page elements.
Experience issues on Firefox where wrong fonts are returned:
Inconsistencies during Chrome updates leading to sudden fixes or breaks...
Encounters font-size selection problems too - could execution timing impact iframe loading?
JQuery snippet for reference:
...CSS styling for main header:
.main-header {
color: #000000;
font-family: Arial;
font-size: 1.5rem;
}
Seeking consistent results across browsers, similar to jsfiddle outcome.