NO BUG: Shape divider with tokenized values not rendering on front end

Bugs
1

Browser: All
OS: All

Strange issue here with shape dividers rendering differently on the frontend vs in Bricks.

We have a shape divider with the following tokenized CSS:

:root {
    --round-divider-height: min(10rem, 10vw);
    --round-divider-width: 125%;
    --round-divider-position: max(-5rem, -5vw);
}

It renders perfectly in Bricks. [I cannot add more than a single image as a new user, unfortunately…]

However, on the front end, it renders as just a circle:

CleanShot 2024-03-16 at 18.48.17@2x
CleanShot 2024-03-16 at 18.48.17@2x3008Ă—476 14.4 KB

  • The issue is present everywhere, on all browsers.
  • We have turned off caching and every single plugin and it persists.
  • Adding the values directly in the shape divider section instead of the CSS variables, solves the issue.

Curious to find out what’s going on here.

2

Hi Bart,
Thanks so much for your report and welcome to the forum!

I reproduced the issue and added it to our bug tracker.

Unfortunately, I cannot reproduce the issue. Can you please provide a live link and a screencast using https://jam.dev showing and explaining the steps needed to replicate the issue?

Best regards,
timmse

3

Hi Stefan,

Thanks for the swift reply!

Here’s a jam.dev link showing and explaining the issue:

https://jam.dev/c/6d2e847c-ca72-441d-8605-b8d13a849585

Bes regards,

Bart

4

Hi Bart,
Thanks so much for the video!

Unfortunately, I cannot replicate the issue.

While inspecting the front end, I noticed your custom “global styles” stylesheet is missing. The variables and custom classes are unavailable, which would explain the behavior. .gradient-text that should apply to “Flow” in the headline is missing, too.

Can you look at that again?

5

Hi Stefan,

After extensive testing, we think this is a WPCodeBox issue. Putting the code in Bricks’s custom CSS field does work.

However, we don’t understand why it renders in the builder and not on the front end. In any case, we’ll open a ticket with WPCodeBox.

Thanks so much for looking into this!

1 Like
6

Hey Bart,
Thanks for the feedback. I’ll mark the thread as “no bug” for now, as it doesn’t seem to be a Bricks bug.