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?

CodePudding user response：

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);
    });
});