Issue with Dynamic Visibility and LiteSpeed ??and Cloudflare caches

Hi,

I have a problem, I think related to the cache used by my server, LiteSpeed, and the cache used by Cloudflare as well.

The problem is the following: I have a section in Elementor that has the Dynamic Visibility option set to hide if a cookie exceeds a certain value (I am managing this cookie from a javascript code that I have inserted in the page). The cookie increases each time a certain page is reloaded. From the WordPress Backend mode it works perfectly when I reload the page several times: when the cookie exceeds the value, the control is hidden.

The problem is that then from the Frontend mode it doesn’t work, even though the cookie exceeds the value, the Elementor section doesn’t get hidden. Doing several tests, it seems that the problem is related to the caches that I mentioned before, it seems that it caches the page and, I don’t know why, it is not able to find out the change that Dynamic Visibility is indicating not to show the control. I have to clear the cache on the LiteSpeed ??and Cloudflare server for it to work.

The same happens in reverse, if once the Elementor section has been hidden, I delete the cookie and refresh the page, it doesn’t notice and the section remains hidden until I clear the server caches again.

Curiously, if the control of the cookie and the hiding is done on the client side, asking for the value in javascript code and hiding the section with a style.display = ‘none’, it always works.

I’ve tried the ‘Keep HTML’ option but it doesn’t work either.

I wanted to ask you, since these cache systems are used by many users, I imagine that someone has already consulted you about this problem. How could it be solved? Because almost all my pages on the site have a section that is hidden based on the value of a cookie, I cannot put all the pages in the cache exception because then I would not use it directly and I would lose the advantage that they offer me.

As I have commented before, if the control of the cookie and the hiding of the Elementor section is done on the client with javascript code (assigning it a CSS ID in Elementor and then commanding it to be hidden in HTML with javascript), it always works, even if it is not the more optimal since the HTML code of the section that is hidden is always sent to the client from the server.

Regards.