DUPLICATE: FOUC/CLS when using a template element

Bugs
1

Hey guys,
I’m finding with Templates that if I insert a copy of the template CSS renders immediately with the page. If I insert the same template using the Template widget I get FOUC, indicating the CSS is loading later.

I have “CSS loading method” set to “Inline Styles”

Bricks Template FOUC.mp4

Is there a resolution for this?

2

Hi Alan,
Thanks so much for your report!

The issue is probably caused by the loading order of the CSS, as already reported here:

Please create two sample pages on your website: one with a directly inserted template and one in which you use the template element. Then, I can see where the template element styles end up and ensure the problem is the same.

3

Hey , sure.

I created two mock pages for you.

https://dev-eximm.wpevolve.net/test-template-element/

https://dev-eximm.wpevolve.net/test-inserted-template/

I do use ACSS for the styling. However, that does not explain why I don’t get FOUC with the inserted template and do get it with the template element ?

4

Hi Alan,
Thanks so much for the examples!

I can confirm it as a known issue since the styles are added in/below the footer (causing the delay). We’re already working on a solution. We’ll update this thread as soon the issue is fixed: