Image Compare block: Slider Overlaps with Sticky Header

[kspilarski]

Quick summary

An Image Compare block slider overlaps in the sticky header.

Steps to reproduce

1. Activate the Optimismo theme.
2. In the site editor, add a navigation block in a row block (to have the Position block setting)
3. In the block setting Position, select Sticky.
4. In the page, add an Image compare block.
5. View the page.

What you expected to happen

The Image compare block slider will not overlap with the sticky header.

What actually happened

The image compare block slider overlaps with the sticky header.

• User case: 7297381-zen (Optimismo theme)

I was able to replicate the issue on my test site using the Optimismo theme. Here's how it looks:

I also tried Organizer theme but can't replicate.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Firefox 119, macOS 14.1.1

[github-actions[bot]]

Support References

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

• [ ] 7297381-zen

[maciejpilarski]

📌 REPRODUCTION RESULTS – Tested on Simple – Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO I was not able to reproduce the issue on my test site:

📌 ACTIONS – Closed as could not replicate (please reopen if the issue reoccurs)

[kspilarski]

Steps to reproduce

The navigation or header must be sticky and there should be an image compare block where the contents of the page should go.

1. Activate the Optimismo theme.
2. In the site editor, on top, add a Row block.
3. Under the Row block, add a navigation block.
4. Click the Row block to go to the settings, and set the Position to "Sticky".

5. In the Row block styles settings, add a background color. It's not necessary to add a background color, it's just to make the 'slider overlap' more visible.

6. In the site editor where the contents should go, add an Image Compare block.
7. Save.
8. Then view the page.

---

The blocks on a List view looks like this:

---

Viewing the page in the site editor already makes the image compare slider overlaps with the header:

---

Then on the live page, the image compare slider also overlaps with the header:

---

Using Twenty Twenty Four theme with a sticky navigation block and image compare block, the slider on the image compare block overlaps with the navigation block:

If a block is made sticky, like a paragraph block, the image compare slider block will always overlap over it. Here's how the image compare slider looks on a sticky paragraph block: