Closeable header section: Delay JS - flash on interaction

chrismcb6

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

chrismcb6

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

chrismcb6

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?