NO BUG: Interactions flickering when code execution is activated. Inoperative in Firefox

[hubie-w]

Browser: Edge 114, Chrome 114, Firefox 115
OS: Windows
URL: https://dev.hwmediaconsult.com/

Hi,
I created a grid with 6 sets of 2 stacked blocks. Each first block contains a background image and each second block a background colour and a title.

I created 2 interactions on each second block: the first interaction, on “Mouse enter” should hide the element (thus showing the background image of the first block), and the second, on “Mouse leave” should show it again.

This works more or less, because you really have to reach each block from outside the grid (same behaviour with “Hover”). I activated code execution and added a small piece of HTML code and from that moment on the title block flickers with each “Mouse enter” (although the trigger now works within the grid). I have the same issue when I use WPCodeBox 2 (Bricks’s code execution switched off) with a condition to execute the code only on the target Post (a pop-up template). The behaviour is the same on separate pages (see: https://dev.hwmediaconsult.com/test-interaction/), where I placed the sets of stacked blocks directly in another block (flex instead of a grid). So it seems to affect the whole site.

The whole setup does not function in Firefox, whether code execution is on or off.

This seems to be a bug, or is there another way to set up the grid without the flckering?

Thanks a lot in advance for your advise!

[manc]

I think hiding and showing toggles between display none and block, meaning there is no smooth animation between the two. Not sure if that’s the flicker you mean, maybe try animations fadein and fadeout instead of show and hide.

Personally I’d probably restructure a bit to make the blocks siblings (can reorder with flex order) and then do it using css.

Kinda late over here but if there ain’t no solution by tomorrow I’ll give it a shot with pure css if you’d like.

[hubie-w]

Hi @manc,

You were absolutely right about doing it with CSS.
All I had to do was to assign a global class to the blocks and put in
root:hover{
opacity:0%;
transition: opacity 1s;
}

I had definitely made things too complicated!

Problem solved!

Thanks & regards,

Hubert

[aslotta]

Hey Hubert,

thanks for your report and great that you already found a solution.

Just for reference: You can also achieve that hover effect using the native builder controls. I created a small demo to demonstrate.

Best,

André

[hubie-w]

Thanks a lot André, this really helps me!

Best regards,

Hubert