Bug 217275 - Browser tab freezes after click the menu on Wikipedia
Summary: Browser tab freezes after click the menu on Wikipedia
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: iPhone / iPad Unspecified
: P2 Critical
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-10-02 22:34 PDT by krinklemail
Modified: 2022-02-11 14:30 PST (History)
4 users (show)

See Also:


Attachments
Test case (1.49 KB, text/html)
2020-10-02 22:34 PDT, krinklemail
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description krinklemail 2020-10-02 22:34:09 PDT
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>
```
Comment 1 Radar WebKit Bug Importer 2020-10-02 22:34:21 PDT
<rdar://problem/69908252>