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?

Closeable header section: Delay JS - flash on interaction

Comments

This website uses cookies