Animations: Navigation Block Mobile Menu Hidden When Inside an Animated Group Block

[mxhassani]

Quick summary

Having an animation added to a Group block that contains a Navigation block, prevents the navigation block mobile from showing all its content.

Steps to reproduce

1. Open/create an atomic site
2. Make sure it uses an FSE theme
3. Make sure coBlocks plugin is installed and active
4. Go to the editor
5. Create a navigation block and add some links to it
6. Make sure the nav block overlay menu is set to Always or Mobile
7. Put that nav block inside a group block.
8. Add an animation to the group block (zoom-in effect is good here)
9. Save and check in front end

What you expected to happen

The navigation menu to show correctly (full page)

What actually happened

It shows only partially, using only the initial height of the header block.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Removing the animation fixes the navigation menu.

Platform (Simple and/or Atomic)

Atomic

Logs or notes

The issue appears to be mainly caused by the Stacking Context change introduced by the animation effect. Making z-index changes not a suitable solution.

One potential fix can be to move the navigation block to a separate wrapper when the context menu is open, and then move it back when closed.

--
9206041-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9206041-zen