Inline CSS variables not rendering

Inline CSS variables not rendering

agimenez
Shopify Partner
1 0 0

Hello everyone!

I frequently utilize inline CSS variables while developing my themes to modify properties based on liquid variables.

 

Example:

<div class="test" style="--background-color: {{ bg_color }};"></div>

CSS: .test { background-color: var(--background-color); }

 

Lately, I've encountered an issue where these variables aren't consistently rendered in the DOM. This problem tends to occur more (but not exclusively) when I use the same block more than once on the same page. It often requires multiple reloads to properly apply the styles, if that even resolves the problem.


You can observe the issue on this page: https://onestic-sunrise.myshopify.com/pages/test

 

Initially, when the page first loads, you'll notice that the variables are not declared, and they cannot be found in the HTML.

 

agimenez_4-1705498482096.png

 

However, upon reloading the page, you'll see the intended appearance, where the variables now appear in the HTML.

agimenez_3-1705498416035.png


Is anyone else experiencing this issue or does anyone have insights into why this problem might be occurring and can help me?

Thank you in advance

Reply 1 (1)

Ritu-25
Shopify Partner
129 26 15

Hello @agimenez , 

 

Could you please share your website password here? 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com