Select, Menu, and other menu-related components causes Chrome and similar Chromium Browsers to crash (Chrome 121.0.6153.0 and above)

[lozandier]

What is affected?

Component

Description

More recent builds of Chromium Browser(s) immediately crash when interacting with menu-related Material Compoents https://github.com/material-components/material-web/assets/1223224/38687ad2-a895-4547-ba66-c4d9f1f3f5fb

Version of @material/web tested: 1.0.1

Reproduction

Steps to reproduce:

1) Use Chrome version 121.0.6153.0 and above 2) Attempt to open a menu/pop-over Material component on a

Expected outcome

Menu opens

Current unexpected behavior

Browser crashes

https://github.com/material-components/material-web/assets/1223224/79e5cc9a-b11e-436e-89ee-1e8ff82d931b

Workaround

I have not found a workaround

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

Latest version of @material/web

Browser/OS/Node environment

Google Chrome 121.0.6153.0 (Official Build) canary (x86_64)

Revision a5c13a277c5fb54744df20f5422eec52a573e632-refs/branch-heads/6153@{#1} OS

macOS Version 14.1.1 (Build 23B81)

[e111077]

hmm i can't get it to repro on Chrome Beta which is 121 but I can get it to repro on Canary which is 122

[e111077]

Narrowed it down to chrome canary running into issues running the open animation itself which uses the native Web Animations API. I can't seem to debug what's going on because it just fails between starting it and it ending. Will try to generate a minimal repro to file on Chromium

[e111077]

It specifically is the surface height animation causing the crash. It crashes in isolation from the other animations involved in opening it, but I cannot make a minimal repro of the issue outside of Menu so far. Here's what I have so far:

https://lit.dev/playground/#gist=2efe56a4ba5e241dad3c7883509ebd48

Will have to continue investigation especially if this issue moves from Canary (122) into Beta (121)

[e111077]

Honestly I think Canary has all sorts of other issues. See this is the surface element and it's inline style= which should be wrong here:

Yet the calculate styles are:

This is how it should look in stable:

[christophe-g]

Chrome 121 landed on stable.

Menu and select crash the browser.

tested with @material/web/@nightly.

[christophe-g]

Workaround for now: set quick=true for all menu and select components to avoid animation on open and close.

[asyncLiz]

@christophe-g what version of Chrome and OS does it crash on?

Chrome 121.0.6167.85 on Mac OS 14.2.1 doesn't crash when I interact with the menus on https://material-web.dev/components/menu/stories/, nor does it crash with the latest version internally.

[christophe-g]

@asyncLiz - it is kind of good news that not all 121 version crash ; )

• Browser : Version 121.0.6167.85 (Official Build) (64-bit)
• OS: Linux Mint 21.2 Cinnamon

Result of clicking first button of https://material-web.dev/components/menu/stories/ :

Nothing in the console.

Opening a menu from https://material-web.dev/components/menu/:

[christophe-g]

Doing some further tests on Lambdatest.com and failing to reproduce the crash:

• Windows 11 Chrome Version 121.0.6167.8: ok
• Windows 10 Chrome Version 121.0.6167.8: ok
• MacOS Sonoma Chrome Version 121.0.6167.8: ok

[asyncLiz]

Chrome 121.0.6167.85 works on my corp Linux station. Are you able to test other Linux distros?

You may also check if chrome://flags/ has experimental web features enabled. If so, try disabling that flag, restarting, and see if it still crashes.

[christophe-g]

chrome://flags/ has experimental web features enabled.

Oh - I would never have thought about this. You found the culprit !

Restarted without flag, WAI. Thank you.

[asyncLiz]

This is an important bug to file in chromium, I believe they're working on popover stuff right now.

@e111077 pinging this on your radar since I think you're looking at some popover anchor stuff rn