Browser: Chrome 110 OS: macOS / Windows / Linux / etc. URL: PRIVATE – please ask and I will provide
I am trying to create a multi-section header such that only one section is sticky on scroll. I achieved that using a single template that uses the bricks_before_header hook.
That section contains links with svg icons. I am NOT displaying that section on mobile.
When loading and reloading on mobile, on any browser, there is visible FOUC, the SVG icons flashing as if unstyled, even if their parent section (the aforementioned template) is set to display: none on mobile.
It’s kinda normal if those css files are loaded after the intial start, do you use any kind of css compression or do you compress all inline style in a file?
I tried both inline and external file loading methods, both provide the same results.
I believe it’s all about the order in which the templates are being loaded, which makes sense, but there should be a way to control these, shouldn’t it
Same problem here. I’m using template for a top bar placed in bricks_before_header hook . It contains secondary menu and opening hours (icon boxes), and should be hidden on mobile. But it causes huge FOUC and bad CLS results cos it’s flashing completely unstyled.
The reason seems to be that the CSS style corresponding to the template is placed at the bottom of the HTML file, just before the end body tag. It seems that this goes for all the templates, probably except for the special templates like header, footer or single (at least these 3 I can see in the head section of my page).
I have several templates used on my page and the FOUC gets quite significant. It gets a bit better when using the “Inline styles” loading method, but it’s just because the styles are loaded more quickly. The order of the styles stays the same.
I had the same problem when I was using Elementor, but there was a trick to move the css files of the particular templates to the head, if you knew their IDs. Is something like this possible with Bricks?
Or at least could it be possible to move to the head at least the styles for the hooks, so it would work similarly to the header / footer styles?
Oh, and there’s a simple temporary hotfix for this. You can place the custom CSS hiding the topbar on mobile to your child theme’s css and because this file is placed in the head, FOUC is gone.
But it’s just a hotfix, you definitely cannot maually duplicate all the important styles in your child theme.