Zoom Out breaks sticky positioned elements

[stokesman]

Description

In the zoomed out view sticky positioning ceases to work. It’s due to the transform applied to the html element in the iframe.

Possible fixes

• Transform the iframe instead of the html element (etc. Refactor Zoom Out to scale iframe #63390)
• Or
  • Hide overflow on the html document
  • Style both html and body to be height: 100%
  • Style body to overflow: auto
  • Rework some more stuff (remove border on the html, etc.)

Step-by-step reproduction instructions

1. With a sticky positioned element in the page
2. Activate Zoom Out
3. Scroll the page and note that the element doesn’t stick

Here’s a sticky block you can paste into the editor:

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}},"position":{"type":"sticky","top":"0px"}},"backgroundColor":"accent-4","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-accent-4-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>We want to stick with you!</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Okay, lets stick together</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

zoom-out-v-sticky.mp4

Environment info

WP 6.5.2 / Gutenberg trunk
Chrome / MacOS

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[draganescu]

Do we want to respect position sticky in this view? I am afraid it will make it very dubious when trying to assemble patterns.

cc @WordPress/gutenberg-design

[jasmussen]

What works better in practice? If disabling it works well enough, that can be fine to do. Though it's reasonable to think about position: fixed being a thing that can exist in the future, in that same interface.

[draganescu]

I am bit more strong on this and think we should close this as wontfix because enabling absolute/fixed position in zoom out will obscure via z-index the assembly of patterns / sections which this view is meant for.

[jasmussen]

This is also one of those things where we can start with one thing, and then can explore if need be alternatives as we get a feel for edgecases.

[jameskoster]

I reckon it's okay to ignore position in this mode for now. That said, if zoom ever becomes a dedicated view option that users can toggle regardless of mode then we may need to add support.

[richtabor]

I agree with the others. Sticky elements will obfuscate pattern selection quite a bit. Let’s close this for now and perhaps revisit when zoom out is in a more stable position.