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

any updates on this? I noticed the same problem…

Hey there,

the ticket is currently on staging which means we are testing the improvements. It should be fixed quite soon. We will update you all as soon as we know more.

Hi @realKC,

it should be fixed now.

Hi @Martin

I checked the component setup again, and I cannot make it work properly. I deleted it and added it again in the footer, and it does not work. The content reflow is still there.

Is there anything I should do to make it work? Thank you in advance.

Hey @AJ_Joe - would you be able to send us a mail with your website ID? Happy to check the website for you.

Hi @Andre, thank you for your reply.

I have emailed this address help@sitejet.io as requested.

1 Like

Hey @AJ_Joe - we addded to this website:

body:not(.edit) .hide-cookie-bar { display: none; }

Seems like this was an old preset that has not been affected by the fix. Should be working now after clearing the cache. Please have a look :slight_smile:

1 Like

Hi @Andre, thank you very much.
Yes now it is working!

  1. You mean that I was using an old preset. How to avoid this in the future?
  2. Which cache have you cleared and how?

Hey @AJ_Joe - we are currently updating our database to avoid using an old preset / template with presets.

With cache I meant your “cache” of the browser. Sometimes, the cache will cause the website being displayed as it was the last time you visited - for performance reasons. :slight_smile:

Hey @Andre, thank you for your reply and clarification. :slightly_smiling_face:

1 Like

You are very welcome! :slight_smile: