Bug 217275 – Browser tab freezes after click the menu on Wikipedia

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: CSS

Created attachment 410413 [details]
Test case

On an iPhone with iOS 14 in Mobile Safari:

1. Open <https://en.m.wikipedia.org/wiki/Main_Page>
2. Click hamburger menu
3. Close the hamburger menu

Result:
Browser tab has crashed.
Tab cannot be refreshed.
Address bar can't navigate elsewhere.
Page cannot be scrolled.
No links can be clicked.

Test case reduced to 10 lines of HTML and 30 lines of CSS:
https://codepen.io/Krinkle/full/xxVvZax

Downstream ticket (currently restricted from public):
https://phabricator.wikimedia.org/T264376

Originally found by Rummana Yasmeen, QA Engineer for Wikimedia Foundation.


```
<a class="mw-mf-page-center__mask" href="#">MASK</a>
<div class="header">
	<nav class="navigation-drawer toggle-list">
		<input type="checkbox" id="main-menu-input" class="toggle-list__checkbox">
		<label for="main-menu-input" class="toggle-list__toggle">Open main menu</label>
		<div class="toggle-list__list">NAV</div>
		<label class="main-menu-mask" for="main-menu-input"></label>
	</nav>
</div>
<hr>
<button onclick="zOutput.append('Caught button click!\n')">Catch me if you can</button>
<pre id="zOutput" style="border: 1px solid black; padding: 1em;"></pre>
html r19
<style>
/* Section 1/2: Housekeeping */
body::after {
	display: block;
	content: "css r104";
}
/* Section 2/3: Wikipedia, linked stylesheet from en.m.wikipedia.org */
.header {
	display: table; /* REQUIRED else no bug */
}
.header > .navigation-drawer {
	display: table-cell; /* REQUIRED else no bug */
}
.main-menu-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1;
	visibility: hidden;
	transition: opacity 100ms ease-in-out, visibility 0ms linear 100ms; /* REQUIRED else different crash */
}
#main-menu-input:checked ~ .main-menu-mask {
	visibility: visible;
}
.toggle-list__checkbox {
	position: absolute; /* REQUIRED else no bug */
}
/* Section 3/3: Wikipedia, JS-loaded stylesheet from en.m.wikipedia.org */
.mw-mf-page-center__mask {
	visibility: hidden; /* REQUIRED else no bug */
}
</style>
```

[Radar WebKit Bug Importer]

<rdar://problem/69908252>