Cookie consent briefly pops up on page after acceptance

Hey! I see you have a cache plugin active on that site. This might cause a wrong CSS class to be present even when the consent has been set.

Here’s what happens: On the PHP side, the cookie notice gets printed with either cookie-notice-consent--hidden or cookie-notice-consent--visible as a class, based on the cookie status. The JS then additionally checks for the presence of the status cookie and hides or shows the notice (by setting the proper class).

With a cache in place, the PHP (or rather static HTML) likely always has the cookie-notice-consent--visible class (the cache gets generated without a cookie consent set), even after the user saved his choice. The JS then later properly hides it. That causes the short flash.

I did some improvements for cache handling in an earlier version, but we might have to do some work on this.

One idea would be to always hide the notice on the PHP side if a cache is active, and let the JS do the work. That would show the notice with a slight delay – as soon as the JS gets executed. But that might be better than a second flash of the notice the user just interacted with.

I’ll have to do some tests on this, but I guess such a change would make sense.

Let me know if this makes sense to you.

Hey, thanks for the in depth reply!

That does totally make sense, and I can see why the cache would make a difference – the only thing I am unsure about is how I can actually implement this! How would I go about making sure the cookie notice is rendered with the cookie-notice-consent--hidden class by PHP?the static HTML created by the cache? A slight delay before the notice is shown would definitely be preferable to the cookie policy flashing up after previously be accepted I think!

Thanks again!

If you’re okay with editing plugin files, you could try swapping line 53 of class-cnc-front.php (within the includes folder) for this:

<div id="cookie-notice-consent" role="banner" class="cookie-notice-consent cookie-notice-consent--hidden" aria-label="<?php _e( 'Cookie Notice & Consent', 'cookie-notice-consent' ) ?>">

That would basically output the notice as hidden in the HTML at all times. JS would then be the only one responsible for showing the notice.

Then try clearing the cache and run some tests.

If this works better, I’d implement a similar cache-aware change with the next release.

Thanks a lot! That worked brilliantly ?? No issues noticed so far!

Great! I’ll push out an update with a cache-sensitive change for that later.