Site Editor: Browse styles animation is too slow

[miminari]

Description

When a user selects a variation of the Browse styles in the Site Editor, the transition when the site preview display switches seems to be too slow and takes too long to fully display the site.

Perhaps the transition( transition: all 0.3s ease 0s; ) set in the iframe needs to be adjusted.

Step-by-step reproduction instructions

1. Activate Block Themes
2. Go to 'Site Editor'
3. Click Site View
4. Click 'Styles'
5. Click 'Browse styles'
6. Choose a variation

Screenshots, screen recording, code snippet

Kapture.2023-03-16.at.08.33.22.mp4

Environment info

• WordPress 6.1.1
• Gutenberg 15.3.1
• Mac OS 12.5.1
• Google Chrome 111.0.5563.64

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

[inc2734]

Same issue ?

Kapture.2023-03-16.at.14.58.10.mp4

The list of patterns displayed when creating a new page also grows slowly, depending on the content.

[t-hamano]

Upon investigation, this problem occurs when the block uses units such as vh that is dependent on the height of the viewport. In the Twenty Twenty Three reported here, vh is used for the height of the post featured image.

For example, this can be reproduced by using vh as the unit for the min-height of the group block. Perhaps the height calculation of the iframe editor instance and the height of the blocks that depend on it interact to cause this unintended behavior.

81b7e18b1a588e6fa0717e4242b87150.mp4

---

However, this problem is not reproduced in WordPress 6.2 with the Gutenberg plugin disabled. Perhaps one of the reasons may be that the latest Gutenberg applies a calculated height to the iframe editor instance.

[t-hamano]

I believe this issue has been fixed in #59334, but if you can reproduce this issue on trunk, feel free to reopen it at any time.

ced01be7de1041f0b257dd26e5dd010e.mp4