Cover Block + Sticky Group + Navigation block

[scruffian]

What problem does this address?

If you place a navigation block inside a sticky position block, inside a cover block, the navigation overlay gets cut off in Safari.

For example, using this block markup:

<!-- wp:cover {"dimRatio":50,"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":20,"minHeightUnit":"vw","isDark":false,"sizeSlug":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:navigation {"ref":2429} /--></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

With formatting

<!-- wp:cover {"dimRatio":50,"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":20,"minHeightUnit":"vw","isDark":false,"sizeSlug":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:20vw">
    <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"constrained"}} -->
        <div class="wp-block-group">
            <!-- wp:navigation {"ref":2429} /-->
        </div>
        <!-- /wp:group -->
    </div>
</div>
<!-- /wp:cover -->

When you open the navigation menu in Safari, is it clipped by the cover block like this:

What is your proposed solution?

The problem is the overflow: clip which was added in #59388. I'm not sure if there's a good workaround though.

This is actually a more general issue with the way that Safari handles clip vs hidden. You can see that using this markup:

<div style="background: red; overflow: clip; height: 100px;">
    <div style="position: sticky;">
      <div style="background: blue; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100% height: 100%;"></div>
    </div>
</div>

[im3dabasia]

Hi @scruffian ,

I applied the same block markup which you provided but was not able to reproduce the issue you are facing. Maybe if you can share a recording. Is there anything I am missing?

Screen.Recording.2025-03-20.at.11.23.06.AM.mov

[nani-samireddy]

Hi @scruffian @im3dabasia
I also tried to replicate the issue but not able to reproduce on WP 6.7 and 6.8 also with Gutenberg latest trunk

[scruffian]

Sorry, I didn't make it clear, the navigation needs to be collapsed - the problem is when the navigation overlay is triggered.

Screen.Recording.2025-03-20.at.17.20.05.mov

[nani-samireddy]

@scruffian Thank you for the details

After spending few time I observed that It is only happening with your code. If I normally add the blocks and test it is working normal

cover.+.nagivation.test.2.1080p.mov

[scruffian]

@nani-samireddy - you need to add a sticky div inside the cover and put the navigation block inside it.

[stokesman]

The problem is the overflow: clip which was added in #59388. I'm not sure if there's a good workaround though.

I’m not able come up with a workaround considering the need to support sticky positioning. I tend to see this as an issue with the navigation block. Its overlaid content is always expected to behave as a root/top level element right? If so, it seems it should "portal" out to the body to avoid issues like this (which could happen in other blocks besides cover). Alternatively, if it can use dialog or the popover API, I think that would also work to stop it from being contained by the cover’s box.

[scruffian]

The only thought I had was, is it possible to change overflow: clip to overflow: hidden when the overlay gets opened? That could be some special CSS selector, or some JS...

[stokesman]

is it possible to change overflow: clip to overflow: hidden when the overlay gets opened?

Interesting idea. I guess the border-radius may no longer clip the content but that would be obscured by the overlay. Except the overlay could be partially transparent right?

Besides that, even just the overflow: hidden can cause clipping of submenus. That’s not the same issue but quite related and I think points toward the need to make sub-menu and overlay elements free of their ancestors containers (i.e change them to use the Popover API and <dialog> elements). I did come across #63917 which explores that direction for the overlay.