I am using the following code to reload a stylesheet when the user makes a selection:
<link type="text/css" id="main_style" href="css/style.php" rel="stylesheet">
<button id="secret_1" style="display:none;"></button>
$(document).ready(function(){
function freshStyle(stylesheet){
$('#main_style').attr('href',stylesheet);
}
$('#secret_1').click(function(event){
event.preventDefault();
var restyled = 'style.php?v='+Math.floor(Math.random() * 10000);
freshStyle(restyled);
});
});
In Chrome, the reload happens fluidly, and the transitions look great. In Firefox, the website temporarily becomes a garbled mess (while the stylesheet is being reloaded) for a second before the new stylesheet is active.
Is this something that can be solved with code, or is this just a feature of the Firefox browser?
If you load the new stylesheet and remove the old one once the new takes effect, the flash of unstyled format should no longer happen
Note: I've done away with jquery inside the .ready since I don't really know how to do a lot of what is happening here in jQuery - vanilla JS all the way for me (but you can convert to jquery if you're more comfortable with it)
$(document).ready(function() {
function freshStyle(stylesheet) {
const id = 'main_style';
const main = document.getElementById(id);
const sibling = main.nextElementSibling;
const parent = main.parentElement;
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = stylesheet;
style.onload = () => {
// load fires BEFORE style is applied - so delay a tick
setTimeout(() => {
// remove the old stylesheet
main.remove();
// set the id of the new sheet to the removed one
style.id = id;
}, 0);
};
// this just ensures the new stylesheet ends up exactly where the old was
parent.insertBefore(style, sibling);
}
document.getElementById('secret_1').addEventListener('click', (e) => {
e.preventDefault();
const restyled = `style.php?v=${Math.floor(Math.random() * 10000)}`;
freshStyle(restyled);
});
});