Skip to content

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

Open
@mxhassani

Description

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)

Image

What actually happened

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Customer ReportIssues or PRs that were reported via Happiness. Previously known as "Happiness Request".Needs triageTicket needs to be triaged[Feature Group] Editor ExperienceFeatures related to Gutenberg integration on WordPress.com.[Feature] CoBlocksThe integration of GoDaddy's CoBlocks plugin on WordPress.com Atomic sites.[Platform] Atomic[Pri] LowAddress when resources are available.[Product] WordPress.comAll features accessible on and related to WordPress.com.[Type] Bug

    Type

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions