[3.0.0-beta.2] Huge layout shift multi step forms

Open Beta
1

I have created a multi-step form in my hero section. On page load, I observe a significant layout shift. It seems that all the form fields are rendered on page load before being hidden. Even with only about 3 fields, the layout shift is very noticeable. How can I fix this? I am using v3.0 beta 2.

Support ticket ID: #1162

2

QOL - Please consider adding an option to hide/show all fields beyond the first step within the builder. When the fields become numerous, the section unnecessarily stretches, which I find intrusive.

3

Hello :slight_smile:

I cannot reproduce it. Even with throttling activated the form is showing only after the fields are rendered.

What do the others say? Can you guys reproduce it?

1 Like
4

@Daniele I sent a ticket with a link to the website but here’s a video showing it

5

I still cannot reproduce it on my end. See this video:

Do you have any conditional stuff running? Any WooCommerce related logic? Or anything with the Bricksforge Panel?

1 Like
6

No conditions, no woo related stuff just vanilla bricks and pro forms. I will dm you the site URL so you see it live

7

UPDATE: I disabled all ACSS settings, retaining only color and font variables. This did not resolve the issue. However, I observed that the layout shift occurs only when I am logged in. Notably, the layout shift does not occur when ACSS is entirely disabled.

1 Like
8

I’m having a similar issue. I submitted ticket #1266 today.
The videos in this thread don’t seem to work anymore so I can’t be certain if it’s the same issue or not. I’m able to reproduce my issue on multiple browsers/devices. I tried installing the last stable release and the most recent beta. Here is a loom of the issue I’m having:

Thanks for any help!

9

ACSS has some default things that they enable after anyone installs it, try disabling some extra stuff on ACSS settings and check.

10

Would be interesting which ACSS settings are causing this. Depending on this, we can offer a compatibility fix :slight_smile:

11

I observed that my website functioned correctly when logged out during local development. However, after deploying to the live production environment, I encountered layout shifts, even while logged out. I have literally disabled all features within ACSS, with the exception of its color and font settings, which are essential for my website. Despite these efforts, the layout shift issue persists.