Bug 222537 – Nested flex-direction: column + height: 100% blocks make page freezed.

• Component: CSS
• Status: NEW

Bug also is reproducing on iPad and iPhone with Safari 14.4

Try this small benchmark test on any page and page'll get freezed.

console.time("benchmark");
var parentNode = document.body;
for(var i=0; i<20; i++) {
var childNode = document.createElement("div");
childNode.style.display = "flex";
childNode.style.height = "100%";
childNode.style.flexDirection = i % 3 === 0 ? "column" : "";
parentNode.appendChild(childNode);
parentNode = childNode;
}
childNode.innerHTML = "Text";
var height = document.body.children[0].offsetHeight;
console.timeEnd("benchmark");

[Smoley]

This does not reproduce for me on iOS 14.4 on iPhone XS or iPad Air 2.

[Radar WebKit Bug Importer]

<rdar://problem/75060709>

(In reply to Smoley from comment #1)
> This does not reproduce for me on iOS 14.4 on iPhone XS or iPad Air 2.

Sry. Wrong condition in code.

There is correct code:

console.time("benchmark");
var parentNode = document.body;
for(var i=0; i<20; i++) {
var childNode = document.createElement("div");
childNode.style.display = "flex";
childNode.style.height = "100%";
childNode.style.flexDirection = "column";
parentNode.appendChild(childNode);
parentNode = childNode;
}
childNode.innerHTML = "Text";
var height = document.body.children[0].offsetHeight;
console.timeEnd("benchmark");

[Sergio Villar Senin]

I guess this might get fixed by https://bugs.webkit.org/show_bug.cgi?id=222202. That bug greatly improves performance of pages with nested column flexboxes with percentages sizes, precisely what this test is about.