Skip to content

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

@Robertght

Description

@Robertght

Description

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

Step-by-step reproduction instructions

Steps to Reproduce

  1. Start by opening a page to edit
  2. Click the blue plus sign to open the blocks & pattern search sidebar
  3. Go to Patterns → Headers (in the Patterns drop down)
  4. 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

Metadata

Metadata

Labels

[Feature] InserterThe main way to insert blocks using the + button in the editing interface[Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions