Closeable header section: Delay JS - flash on interaction

chrismcb6 · June 1

Hello.

On a site with a closeable header notice section that also uses WP Rocket with "Delay JS" enabled, the section is hidden on load; then appears when a user interacts with the page.

The entire page therefore moves down when a user tries to do something.

Is it possible for this to operate alternatively, without needing to allow the entire theme scripts.js file to execute on load?

You can see this at https://tinyurl.com/3cm677n7

Thank you.

Phil · June 1

Hi,

I have contacted our dev team, and I was informed that there is no other option except excluding the entire scripts.js file, unfortunately.

Best regards

chrismcb6 · June 1

OK, in that case, could an animation option be considered?

That way, the "flash" would appear more considered with a "slide down" rather than being abrupt.

Phil · June 1

Please try the following CSS code:

@keyframes slideInFromTop {

 0% {
  transform: translateY(-100%);
 }
 100% {
  transform: translateY(0);
 }
}

.mcb-section-w4k4plx{  
 animation: 1s ease-out 0s 1 slideInFromTop;
}

Best regards

chrismcb6 · June 1

Thanks, however the jump still appears on the page interaction as the .mfn-temporary-hidden class gets removed.

Is there an alternative solution the devs would consider as a theme improvement?

Phil · June 2

I will ask our dev team about that.

Best regards

Phil · June 5

Have you checked that with plugins disabled?

Does it behave in the same way?

Best regards

chrismcb6 · June 5

Sorry, which plugins?

This only happens when a caching system (WP Rocket) is in play, as it defers JS until user interaction.

Phil · June 5

I meant all other plugins, but forgot about that.

We have validated it with our dev team, and we have added a CSS code to your website:

At the moment, it is commented out, so please check if it behaves as you intended when this CSS is in use.

We cannot recommend anything else.

Best regards

chrismcb6 · June 5

Thanks - that work on load, however if the section has previously been dismissed, the JS then hides it on user interaction now.

It's therefore a flash the other way... they have already seen it and dismissed it, but will be shown it on every page until interacting, where the JS triggers and hides.

Closeable header section: Delay JS - flash on interaction

Comments

This website uses cookies