Zoom behavior broken

[ayushnirwal]

Bug Description

On a 2K display, going from Fill or 200% zoom level (with some non-zero scroll) to 100% leaves the Display layer and frames layer un aligned.

Expected Behaviour

The Display Layer should not be out of view.

Steps to Reproduce

1. Add a few elements to the story.
2. Set the zoom level to 200% or Fill.
3. Scroll to the bottom of the canvas.
4. Set the zoom level to 100% or Fill.

Screenshots

Screen.Recording.2023-04-19.at.10.38.50.AM.mov

Additional Context

• Plugin Version: 1.32.0-alpha.0
• WordPress Version: 6.2
• Operating System: MacOS
• Browser: Chrome
• Display resolution: 2048 * 1080

[swissspidy]

Good catch! We should fix this

[swissspidy]

Possibly related: #7638

[swissspidy]

@AnuragVasanwala are you able to reproduce this one?

[AnuragVasanwala]

@AnuragVasanwala are you able to reproduce this one?

@swissspidy Yes, I tried to reproduce it and Display Layer gets out of the view. Upon adding a new element gets back Display Layer so need fix for this. Will identify the cause.

Do you suggest any pointers regarding the issue?

[swissspidy]

Unfortunately I don‘t have any pointers. It‘s also not a high priority issue, let‘s focus on the group layer bug first.

[AnuragVasanwala]

@swissspidy Just an update!

Changing false value of --overflow-y to auto (from visible) seems fixed the issue but still trying to figure out why? 🤔

web-stories-wp/packages/story-editor/src/components/canvas/layout.js

Line 361 in 53b1b9e

'--overflow-y': hasVerticalOverflow ? 'scroll' : 'visible',

- '--overflow-y': hasVerticalOverflow ? 'scroll' : 'visible', 
+ '--overflow-y': hasVerticalOverflow ? 'scroll' : 'auto',