Patterns using VH units or fixed background vertically expanding their previews endlessly #34729

Robertght · 2021-09-10T07:46:46Z

Description

This is a replica of this issue: Automattic/wp-calypso#56077

Step-by-step reproduction instructions

Steps to Reproduce

Start by opening a page to edit
Click the blue plus sign to open the blocks & pattern search sidebar
Go to Patterns → Headers (in the Patterns drop down)
Start scrolling. The second pattern, "Large header with text and a button" does not load correctly and breaks the entire pattern selection box.

I tested this on Chrome and did not see the same error/issue.

In Safari, I also got an error that "This webpage is using significant memory. Closing it may improve the responsiveness of your Mac."

I'm currently running Safari Version 14.1.2 (16611.3.10.1.6) on macOS Big Sur, version 11.5.2. 16" 2019 MacBook Pro.

Video of the error:

Screen.Recording.2021-09-07.at.2.27.37.PM.mov

Screenshots, screen recording, code snippet

No response

Environment info

Operating System

macOS

OS Version

11.5.2

Browser

Safari

Browser Version(s)

14.1.2

Is this specific to applied theme? If so, what is the theme name?

I tested using Blank Canvas and also Bradford. Issue happened on both themes.

Console and/or error logs

No response

Available Workarounds

You can use a different web browser - I was able to select a header pattern in Chrome.

Reproducibility

No response

Other information

No response

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

jasmussen · 2021-09-15T11:51:27Z

Thank you for the ticket. I can reproduce this in trunk. The issue is with the "Large header with text and a button" pattern under "Headers".

The pattern in question uses both the cover block's fixed-position property and the has a height of 100vh. This is the element that expands:

<div class="block-editor-block-preview__content components-disabled css-idxg31-StyledWrapper e1ac3xxk0" style="transform: scale(0.250833); height: 10028.1px;"><iframe aria-hidden="true" tabindex="-1" title="Editor canvas" style="position: absolute; width: 1200px; pointer-events: none; height: 39979px;"></iframe></div>

It appears to be the iframe auto-resize function that keeps firing, possibly because 100vh keeps increasing as the iframe grows taller, causing a loop.

Robertght · 2021-09-16T19:44:15Z

@jasmussen It looks like there are other browsers and OS's(& versions) affected by this: Automattic/wp-calypso#56182

jasmussen · 2021-09-17T05:57:11Z

I took the liberty of updating the title a bit.

zdenys · 2021-09-22T14:13:41Z

I was able to reproduce it with the Coming Soon patterns too.

bug-block-pattern-height-expanding-indefinitely-2021-09-21-at-09.mp4

yansern · 2021-10-13T11:00:33Z

Investigation note:

100vh units causes the resize observer to go into a firing loop.
The component tree looks like this BlockPatternsList > BlockPattern > BlockPreview > AutoHeightBlockPreview.
The file to look at is packages/block-editor/src/components/block-preview/auto.js.
Quick fix: As there is no DOM event that could determine when a page is fully rendered, I think the quickest way is to just have a hard limit on how many times ResizeObserver listener can be triggered.

gwwar · 2021-10-15T18:45:24Z

I saw this with Skatepark too. BlockPreview already has a viewportWidth prop. Can we provide a similar default for viewportHeight? Patterns that use vh should probably explicitly set this when registering the pattern. In addition to this we can set a max height (so we don't get silly results).

CleanShot.2021-10-15.at.11.36.41.mp4

Fixes WordPress#34729

alshakero · 2021-10-21T14:25:18Z

I'm working on this and I think I've find a good solution. I'll send a PR shortly.

Use iframe content height as the iframe height, but cap it to the arbitrary but reasonable aspect ratio of 1:1. This prevents vh units from making the iframe grow forever. Fixes: WordPress#34729

alshakero · 2021-10-21T16:23:24Z

PR ready #35841

kjellr · 2021-10-28T16:49:56Z

Just a heads up that I've temporarily removed Header area with hatched pattern from the list of featured patterns, so that this doesn't happen whenever folks scroll down the "Featured" list.

ndiego · 2022-01-19T13:13:43Z

I wanted to circle back on this issue as it's a pretty important one, especially as patterns become a more integral part of the building experience.

I have been unable to diagnose the root cause, but I did want to highlight an incredibly easy way to reproduce this using native block controls.

Make sure you have the latest version of Gutenberg active.
Create a Columns block with two columns.
In the right column, add a Cover block, set a background image/color and apply the "Toggle full height" setting.
In the left column add some text.
Register a pattern with this block code.
Preview the pattern in the Inserter.

What strange is while I am able to reproduce this in the latest version of Gutenberg, this issue does not appear to exist In WordPress 5.9 RC3! The same pattern in RC3 without Gutenberg active looks like this:

Very curious 🤔

richtabor · 2022-01-21T13:58:10Z

I've been able to replicate this, but only with vh units set to 100. If I set a pattern to 99vh it seems to be working fine.. probably 😅

courtneyr-dev · 2022-01-23T18:00:08Z

I have reproduced this issue as well when activating Gutenberg 12.5.x. I found it especially noticeable in Twenty Twenty One theme, and less apparent in Twenty Twenty Two.

large.header.vh.mp4

Mac Monterey, Chrome Version 97.0.4692.71, running site in LocalWP, 5.9RC3

noisysocks · 2022-01-23T23:14:23Z

Can the folks here who are able to reliably reproduce the issue please go and test whether #35841 fixes it?

ixkaito · 2022-01-24T05:06:28Z

I share my video from WordPress Core's Trac. This bug exists with all bundled themes except Twenty Twenty-Two.

Kapture.2022-01-23.at.19.09.59.mp4

#35841 seems to provide a minimum fix. Blocks still expand vertically but stop at the aspect ratio 1:1.

Kapture.2022-01-24.at.14.00.51.mp4

WordPress: trunk, 5.9-RC3
OS: macOS
Browsers: Chrome, Firefox

ixkaito · 2022-01-24T10:26:45Z

I noticed that this bug occurs with non-block themes. The bug is caused by the vertical margin applied to previews of 100vh blocks. The vertical margin is set in the following file.

gutenberg/packages/edit-post/src/classic.scss

Lines 28 to 29 in 2484854

    
           margin-top: $default-block-margin; 
        
           margin-bottom: $default-block-margin;

hellofromtonya · 2022-01-24T14:02:56Z

Hello all 👋 PR #38175 has been merged and will be backported to Core to include in 5.9 RC4 and final release. Thank you everyone for contributing!

Robertght mentioned this issue Sep 10, 2021

Block Patterns: Can't access the Header patterns in Safari Automattic/wp-calypso#56077

Closed

jasmussen added the [Type] Bug An existing feature does not function as intended label Sep 15, 2021

jasmussen changed the title ~~Some patterns(headers/about) expanding in Safari~~ Patterns using VH units or fixed background vertically expanding their previews endlessly Sep 17, 2021

annezazu added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Sep 17, 2021

Robertght mentioned this issue Sep 23, 2021

Block patterns: Link in Bio preview keeps expanding, breaks view, scrolls endlessly Automattic/wp-calypso#56495

Closed

yansern mentioned this issue Oct 13, 2021

Block Patterns: Shrinking block pattern previews Automattic/wp-calypso#56182

Closed

alshakero added a commit to alshakero/gutenberg that referenced this issue Oct 21, 2021

Cap BlockPreview iframe content height to 1:4 AR

8592894

Fixes WordPress#34729

alshakero mentioned this issue Oct 21, 2021

Resizable Iframe: cap content height to 1:1 aspect ratio #35841

Closed

7 tasks

github-actions bot assigned alshakero Oct 21, 2021

github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 21, 2021

annezazu mentioned this issue Nov 12, 2021

Block inserter - never ending scrolling with Gutenberg >=11.4 and Genesis theme framework #36349

Closed

Mamaduka mentioned this issue Jan 12, 2022

Individual Patterns have scrollbars in Inserter making it difficult to scroll through #37573

Closed

noisysocks mentioned this issue Jan 24, 2022

Update @wordpress packages WordPress/wordpress-develop#2220

Closed

Mamaduka mentioned this issue Jan 24, 2022

Fix pattern preview expanding height and scrollbar issues #38175

Merged

8 tasks

github-actions bot assigned Mamaduka Jan 24, 2022

ixkaito mentioned this issue Jan 24, 2022

Fix pattern preview expanding height issue #38180

Closed

8 tasks

github-actions bot assigned ixkaito Jan 24, 2022

Mamaduka closed this as completed in #38175 Jan 24, 2022

ixkaito mentioned this issue Jan 24, 2022

Fix/expanding thumbnails #38181

Open

8 tasks

annezazu mentioned this issue Jul 4, 2023

Styles > Browse Styles: query loop causing ever expanding view when zoomed out #52297

Closed

annezazu mentioned this issue Sep 3, 2024

Page Layout - Some layout previews continuously grow in height in the layout picker Automattic/wp-calypso#79940

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Patterns using VH units or fixed background vertically expanding their previews endlessly #34729

Patterns using VH units or fixed background vertically expanding their previews endlessly #34729

Robertght commented Sep 10, 2021 •

edited by talldan

Loading

jasmussen commented Sep 15, 2021

Robertght commented Sep 16, 2021

jasmussen commented Sep 17, 2021

zdenys commented Sep 22, 2021

yansern commented Oct 13, 2021

gwwar commented Oct 15, 2021

alshakero commented Oct 21, 2021

alshakero commented Oct 21, 2021

kjellr commented Oct 28, 2021

ndiego commented Jan 19, 2022

richtabor commented Jan 21, 2022 •

edited

Loading

courtneyr-dev commented Jan 23, 2022

noisysocks commented Jan 23, 2022

ixkaito commented Jan 24, 2022 •

edited

Loading

ixkaito commented Jan 24, 2022

hellofromtonya commented Jan 24, 2022

Patterns using VH units or fixed background vertically expanding their previews endlessly #34729

Patterns using VH units or fixed background vertically expanding their previews endlessly #34729

Comments

Robertght commented Sep 10, 2021 • edited by talldan Loading

Description

Step-by-step reproduction instructions

Steps to Reproduce

Screenshots, screen recording, code snippet

Environment info

Operating System

OS Version

Browser

Browser Version(s)

Is this specific to applied theme? If so, what is the theme name?

Console and/or error logs

Available Workarounds

Reproducibility

Other information

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

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

jasmussen commented Sep 15, 2021

Robertght commented Sep 16, 2021

jasmussen commented Sep 17, 2021

zdenys commented Sep 22, 2021

yansern commented Oct 13, 2021

gwwar commented Oct 15, 2021

alshakero commented Oct 21, 2021

alshakero commented Oct 21, 2021

kjellr commented Oct 28, 2021

ndiego commented Jan 19, 2022

richtabor commented Jan 21, 2022 • edited Loading

courtneyr-dev commented Jan 23, 2022

noisysocks commented Jan 23, 2022

ixkaito commented Jan 24, 2022 • edited Loading

ixkaito commented Jan 24, 2022

hellofromtonya commented Jan 24, 2022

Robertght commented Sep 10, 2021 •

edited by talldan

Loading

richtabor commented Jan 21, 2022 •

edited

Loading

ixkaito commented Jan 24, 2022 •

edited

Loading