Navigation block: overlapping(z-index) issue when nested inside Cover Block

Robertght commented 1 year ago

Quick summary

While having an overlay menu opened, the slideshow block shows up on top of the overlay.

Steps to reproduce

Activate a block theme(tested with Blank Canvas, 2023, Quadrat)
Open the default page template
Set a Cover block in the header with a smaller height. (20-40vh)
Set the navigation block's overlay menu to "alaway".
After the header template part, add a slideshow block(or multiple, I don't judge)
Publish the changes and open the menu

What you expected to happen

To see the navigation menu correctly

What actually happened

This happened: (yes that image is from the slideshow)

Browser

Google Chrome/Chromium, Mozilla Firefox, Microsoft Edge

Context

No response

Platform (Simple, Atomic, or both?)

Simple

Other notes

Found that in Slack while trying to help with CSS: p1687930863677319-slack-C03TY6J1A

I only tested this on Simple websites and on a Pressable website. The issue only manifested on the Simple sites, using the same themes.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

CSS is the only thing I could suggest. In Slack we used:


/* adjust the z-index on the slideshow | xxxxxx-zen */
.wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container {
    z-index: 99999;
}
```,

github-actions[bot] commented 1 year ago

Support References

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

[ ] -zen
[ ] 7228873-zen
[ ] 7277570-zen
[ ] 7825401-zen
[ ] 8082235-zen
[ ] 8173661-zen

cuemarie commented 1 year ago

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

Tested on Simple – Replicated
Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

The problem only appears when the Nav Block is placed inside a Cover block (the height of the cover block has no impact on the behavior). The z-index of the Slideshow and the Nav block are as follows in both setups:

wp-block-jetpack-slideshow_container

.swiper-container {
     z-index: 1;
}

wp-block-navigation__responsive-container hidden-by-default has-modal-open is-menu-open

.wp-block-navigation__responsive-container.is-menu-open {
     z-index: 100000;
}

The Cover block is the key difference, and the cover block also has a z-index: 1, and that z-index is likely what's causing problems. There are a few open issues about this in /gutenberg such as:

Screenshots/Recordings

Simple Site, with Nav Block inside Cover Block: Markup on 2023-07-12 at 12:48:25

Same site without Cover Block: Markup on 2023-07-12 at 12:48:41

📌 ACTIONS

Assigned to Other
Added to ‘HE Cross-repo Watchlist’ project board

janmckell commented 10 months ago

This occurred here: 7228873-zd-a8c

carolframen commented 9 months ago

7277570-zen

This issue is not exactly the same as what is happening in this ticket, as the ticket is not about the overlay menu, and the height of the menu does affect the issue. This ticket is the same issue as the merged one https://github.com/Automattic/wp-calypso/issues/80151.

This user is on the personal plan, so they can't add CSS, but I replicated the issue on my site and tried the CSS workaround for this situation and it did not work.

I tested and making the cover block longer in this case does help, but it might not be how the user wants it to look like

Aurorum commented 5 months ago

7825401-zen - CSS workaround also doesn't help

coder-mahfuz commented 5 months ago

7825401 -zen Setting the overflow to visible of the cover block worked in this ticket.

.wp-block-cover{
overflow: visible;
}

rinazrina commented 5 months ago

vinnykaur commented 3 months ago

One more: 8082235-zd-a8c

upwardmomentum84 commented 3 months ago

Related issue: 8173661-zd-a8c

The submenu on mobile was being overlayed by the Cover block below it. I added a CSS class to set the Cover block that contained the menu to have a high z-index and this resolved it.

hngdny commented 1 month ago

Related issue: 8380863-zd-a8c

Used the workaround to set custom CSS class + high Z-index

Automattic / wp-calypso