Cookie bar - Annoying content reflow on each page display

I add the cookie bar to the website: even if it has been closed (after first time display and once I clicked on “I accept”), it shows and hides quickly on each page opening. So each time I navigate to a page, the cookie bar is displayed and then gone quickly, causing a content reflow and a bad user experience. I guess, it should be set to display none as initial state. How to prevent this behavior?

Hi! Do you have a website so we can check to see the issue.
In general the cookie bar is position absolute/fixed, so it doesn’t participate in the content flow.

1 Like

Hi @Lucian_Dinu, thank you for your reply. I rolled back the changes and included the cookie bar again, in order to share it with you.

Please visit the preview website. Accept the cookie bar and then navigate between pages. You will notice the quick display of the cookie bar on each page load.

Hi! I’ve looked at your website and I think the issue is not with the cookie banner …

I think the issue is similar to your no. 6 (Content reflow) from here: Performance issues

From what I’ve seen the problem is with a CSS variable --spacer-height that initially has a default value (105px) and then it is adjusted using when the page finish loading.
See more details here, where it was discussed: --spacer-height bug when I edit the header

Hope this helps!

Hi @Lucian_Dinu I tried you --spacer-height fix applied on the element ID, and it fixed the no. 6 (Content reflow) from here: Performance issues. It is a hotfix applied to one element. There should be another way to do it, as it is not possible to do a hotfix for each website page, instead of fixing the root value.

And you can see in this video that this hotfix has no impact on the cookie bar reflow. Please note that the network is throttled at Slow 3G for the demo purpose.

@Andre, @Martin, @malte any developer advice on this? Thank you in advance.

You nested the cookie bar inside your footer. Every time the footer is rendered, the cookie bar will pop up for a second. I recommend putting the cookie bar outside, e.g. bellow the footer preset container. This should do the trick.

Hi @Martin, thank you for your reply.

I nested the cookie bar in the footer in order to make it show on any page of the website, as a user may access the website from any page.

I followed your suggestion, I removed the cookie bar from the footer, and this is what happens:

  • the cookie bar is only displayed on the home page
  • the cookie bar reflow does persist on the home page on each page load

As of now, this is not the solution unless I missed something.

I found out, that the preset-cookie-bar-v2-default class is causing this behavior. I will check it with our developers.

1 Like

@AJ_Joe Fix is on the way. I will inform you as soon as the fix is released.

1 Like