Large css, page blinking when loaded in firefox?

Question

css

Css file - one 1M in size, in chrome everything is ok, when you open it in firefox - first there is a markup without styles and then there is a transformation

how to win?

Answer 1

I had such a problem, it was decided by the preloader.
Add to head

<style>
body, html { opacity: 0; }
</style>

and hang a preloader that would overlap back.

<!-- preloader -->
    <style type="text/css">
        .preloader_bg { position: fixed; background: rgba(15,15,15,1); width: 100%; height: 100%; top: 0; left: 0; z-index: 200; }
        .preloader_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 201; font-size: 14px; }
        .preloader_content span { display: block; margin: auto; text-align: center; text-transform: uppercase; color: rgba(225,225,225,1);}
    </style>
    <script type="text/javascript">
    $(function(){
        $('.preloader_bg, .preloader_content').fadeIn(0);
        $(window).load(function(){
            $('body,html').css({ opacity: 1 }); // снимаем прозрачность
            $('.preloader_bg').delay(250).fadeOut(1500);
            $('.preloader_content').delay(250).fadeOut(750);
        });
    });
    </script>
    <div class="preloader_bg"></div>
    <div class="preloader_content">
        <span>Идет загрузка...<br>Подождите...</span>
    </div>
    <noscript>
        <style>
            html, body { opacity: 1 !important; }
            .preloader_bg, .preloader_content { display: none !important; }
        </style>
    </noscript>
    <!-- /preloader -->

Answer 2

Highlight the critical css code and load it first. It is even possible to insert it inline into html.
And for preloaders you want to kill. Let it blink better.

Answer 3

If you see correctly - 928Kb.
I would definitely cut it into pieces and first load what is responsible for the first screen, the rest - as needed