Certain Flexbox layout causes 100% CPU usage upon rendering - entire tab freezes
Reported by
nto...@salesforce.com,
Sep 6 2016
|
|||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36
Steps to reproduce the problem:
Load one of the following page and the CPU usage of the tab will go to 100% and the page will never render:
Standards Mode:
<!DOCTYPE html>
<html>
<head>
<title>Chrome 53 Rendering Bug - Standards Mode</title>
<style>
.main {
height: 100%;
position: absolute;
}
.region {
display: flex;
height: 100%;
}
.component {
display: flex;
flex-flow: column;
height: 100%;
}
.content {
flex: auto;
position: relative;
overflow: auto;
}
.text {
position: absolute;
}
</style>
</head>
<body>
<div class="main">
<div class="region">
<div>
<div class="component">
<p>test</p>
<div class="content">
<p class="text">test2</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Quirks Mode:
<html>
<head>
<title>Chrome 53 Rendering Bug - Quirks Mode</title>
<style>
.main {
display: flex;
}
.region {
overflow: auto;
}
.component {
display: flex;
flex-flow: column;
height: 100%;
}
.content {
flex: auto;
position: relative;
overflow: auto;
}
.text {
position: absolute;
}
</style>
</head>
<body>
<div class="main">
<div class="region">
<div class="component">
<p>test</p>
<div class="content">
<p class="text">test2</p>
</div>
</div>
</div>
</div>
</body>
</html>
What is the expected behavior?
What went wrong?
I haven't been able to get any additional information about this problem because as soon as the browser renders the bad layout the entire tab is totally useless - including dev tools.
Crashed report ID:
How much crashed? Just one tab
Is it a problem with a plugin? No
Did this work before? Yes Chrome 52 Stable
Chrome version: 53.0.2785.89 Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 22.0 r0
I've observed this issue in:
Chrome 53 Stable:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36
The latest Canary:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2852.0 Safari/537.36
,
Sep 14 2016
This may be related to https://bugs.chromium.org/p/chromium/issues/detail?id=644635
,
Sep 14 2016
Reproducible on Windows 10 in Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.113 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2860.0 Safari/537.36
,
Sep 14 2016
> This may be related to https://bugs.chromium.org/p/chromium/issues/detail?id=644635 Actually that one is not really related -- Flexbox already has the optimization that the other bug is adding to tables. I'll investigate this as soon as I can.
,
Sep 14 2016
Comment #2 is probably correct, this is probably another case of layout in an infinite loop due to overflow:auto and multi-pass layout. I'll take this.
,
Sep 15 2016
Hi @szager, I've try to dump my frozen chrome.exe and start a debugging session. Here's what I've got (in the attachment) My fear is that if this is not the same area as what you're looking at, it might be another bug that I'm seeing.
,
Sep 15 2016
As mentionned in https://bugs.chromium.org/p/chromium/issues/detail?id=646889, I think both might be the same issue. In that case, Crash ID crash/c1602df500000000 happened with this issue.
,
Sep 15 2016
Thanks @panitw, I have reproduced the bug and I am actively working on it.
,
Sep 15 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/906252430fe0108cf163f1fd9c2e96aa283f9cb5 commit 906252430fe0108cf163f1fd9c2e96aa283f9cb5 Author: szager <szager@chromium.org> Date: Thu Sep 15 23:28:31 2016 Freeze scrollbars for relayout if overflow:auto added scrollbars. Under very specific circumstances, LayoutBlockFlow::layoutBlock will loop infinitely in this stanza: while (!done) done = layoutBlockFlow(...); ... due to fluctuations in the existence of overflow:auto scrollbars in descendants. Any layout type that does multi-pass layout is especially susceptible to this, hence this bug affecting flexbox, and another recent bug affecting tables: crbug.com/64635. This fix supercedes the existing fix for the table bug, and it should fix any other variations of this bug involving multi-pass layout and overflow:auto. BUG= 644450 R=cbiesinger@chromium.org,eae@chromium.org Review-Url: https://codereview.chromium.org/2345103002 Cr-Commit-Position: refs/heads/master@{#419035} [add] https://crrev.com/906252430fe0108cf163f1fd9c2e96aa283f9cb5/third_party/WebKit/LayoutTests/scrollbars/overflow-auto-infinite-loop.html [modify] https://crrev.com/906252430fe0108cf163f1fd9c2e96aa283f9cb5/third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp [modify] https://crrev.com/906252430fe0108cf163f1fd9c2e96aa283f9cb5/third_party/WebKit/Source/core/layout/LayoutTableSection.cpp
,
Sep 15 2016
Requesting merge to M53 and M54: this is breaking production sites. This patch also fixes crbug.com/644635
,
Sep 16 2016
Per chat with szager@ holding off approval merge to M53 until change is baked/verified in Canary/Dev/Beta(See https://bugs.chromium.org/p/chromium/issues/detail?id=644635#c27 for more details).
,
Sep 16 2016
[Automated comment] Request affecting a post-stable build (M53), manual review required.
,
Sep 16 2016
Your change meets the bar and is auto-approved for M54 (branch: 2840)
,
Sep 16 2016
[Automated comment] Request affecting a post-stable build (M53), manual review required.
,
Sep 17 2016
,
Sep 19 2016
Could you please confirm whether this change is baked/verified in Canary and safe to merge?If yes, merge your change to M54 (branch: 2840) before 4.00 PM PST by Tuesday ( 09/20) so that we could take this for next Beta Release.
,
Sep 20 2016
Works for me in Canary 55.0.2866.0!
,
Sep 20 2016
This issue has been approved for a merge. Please merge the fix to any appropriate branches as soon as possible! If all merges have been completed, please remove any remaining Merge-Approved labels from this issue. Thanks for your time! To disable nags, add the Disable-Nags label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 20 2016
Any word on backporting this to v53? We're hitting this bug on production sites.
,
Sep 20 2016
I can also confirm that this fix works for me in Canary 55.0.2866.0. Thank you @szager for the resolution.
,
Sep 20 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6130f81a4d918145830f585ab715b51266d16e50 commit 6130f81a4d918145830f585ab715b51266d16e50 Author: szager <szager@chromium.org> Date: Tue Sep 20 17:21:07 2016 Freeze scrollbars for relayout if overflow:auto added scrollbars. Under very specific circumstances, LayoutBlockFlow::layoutBlock will loop infinitely in this stanza: while (!done) done = layoutBlockFlow(...); ... due to fluctuations in the existence of overflow:auto scrollbars in descendants. Any layout type that does multi-pass layout is especially susceptible to this, hence this bug affecting flexbox, and another recent bug affecting tables: crbug.com/64635. This fix supercedes the existing fix for the table bug, and it should fix any other variations of this bug involving multi-pass layout and overflow:auto. Cherry-picked from https://codereview.chromium.org/2345103002 BUG= 644450 TBR=cbiesinger@chromium.org,eae@chromium.org NOTRY=true NOPRESUBMIT=true Review-Url: https://codereview.chromium.org/2345103002 Review-Url: https://codereview.chromium.org/2359523002 Cr-Original-Commit-Position: refs/heads/master@{#419035} Cr-Commit-Position: refs/branch-heads/2840@{#442} Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607} [add] https://crrev.com/6130f81a4d918145830f585ab715b51266d16e50/third_party/WebKit/LayoutTests/scrollbars/overflow-auto-infinite-loop.html [modify] https://crrev.com/6130f81a4d918145830f585ab715b51266d16e50/third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp [modify] https://crrev.com/6130f81a4d918145830f585ab715b51266d16e50/third_party/WebKit/Source/core/layout/LayoutTableSection.cpp
,
Sep 20 2016
This fix will go into the next M54 (beta) release, which should be in the next day or two. If everything looks good in beta, then I'll merge the change into M53, and it will go into the next stable release -- I'm not sure when that will be, it's unlikely that we would push out a stable release just for this fix.
,
Sep 20 2016
Hi, sorry if additional confirmations aren't useful at this point, but: I had an internal site that was freezing on M53 stable, and is working fine Canary 55.0.2866.0. Thanks for the fix!
,
Sep 21 2016
Tested the issue on Win10, Mac OS X 10.11.6 using Chrome Beta # 54.0.2840.34 using the attached html - page rendered normally. Attached screencast for reference and adding TE-Verified labels.
,
Sep 22 2016
This also affects a product of my company which no longer works in Chrome on Mac and Android. The latest Beta has fixed it on Mac. Please consider releasing a fixed Stable for Mac and Android as soon as possible. Thank you.
,
Sep 22 2016
Per comment #26, this also affects on Android.
,
Sep 22 2016
Merge approved for M53 branch 2785.
,
Sep 22 2016
Re comment #26: this bug only affects platforms with non-overlay scrollbars. It doesn't affect Android, and it only affects Mac if the system setting for overlay scrollbars is set to disabled.
,
Sep 22 2016
Upon further examination, I see that I was wrong in comment #29: this bug does affect platforms with overlay scrollbars, because the logic to determine whether scrollbars occupy space in the layout is incorrect.
,
Sep 23 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/68324ed3a9aa9037b105a947b99a7dfe756180c8 commit 68324ed3a9aa9037b105a947b99a7dfe756180c8 Author: szager <szager@chromium.org> Date: Fri Sep 23 04:54:15 2016 Freeze scrollbars for relayout if overflow:auto added scrollbars. Under very specific circumstances, LayoutBlockFlow::layoutBlock will loop infinitely in this stanza: while (!done) done = layoutBlockFlow(...); ... due to fluctuations in the existence of overflow:auto scrollbars in descendants. Any layout type that does multi-pass layout is especially susceptible to this, hence this bug affecting flexbox, and another recent bug affecting tables: crbug.com/64635. This fix supercedes the existing fix for the table bug, and it should fix any other variations of this bug involving multi-pass layout and overflow:auto. Cherry-picked from https://codereview.chromium.org/2345103002 BUG= 644450 TBR=cbiesinger@chromium.org,eae@chromium.org NOTRY=true NOPRESUBMIT=true Review-Url: https://codereview.chromium.org/2354263006 Cr-Commit-Position: refs/branch-heads/2785@{#917} Cr-Branched-From: 68623971be0cfc492a2cb0427d7f478e7b214c24-refs/heads/master@{#403382} [add] https://crrev.com/68324ed3a9aa9037b105a947b99a7dfe756180c8/third_party/WebKit/LayoutTests/scrollbars/overflow-auto-infinite-loop.html [modify] https://crrev.com/68324ed3a9aa9037b105a947b99a7dfe756180c8/third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp
,
Sep 28 2016
Tested the issue on Mac 10.11.6 using chrome version 53.0.2785.146 with the attached html from comment #25.Page rendered fine without any crash. Please find the attached screen cast for the same. Adding TE-Verified labels. Thanks,
,
Sep 28 2016
Is there any update on the ETA for this to be rolled into the next stable release? Thanks.
,
Sep 28 2016
The change has been merged to the stable branch, but I don't have an update on when a stable release will occur. I'll post to this bug as soon as I know.
,
Sep 29 2016
This patch is now pushing out to stable channel in version 53.0.2785.143 for Desktop (Win,Mac & Linux).
,
Sep 30 2016
No crashes happen with the latest Chrome update, thanks.
,
Oct 3 2016
Marking fixed, since the fix is now in all branches.
,
Oct 7 2016
Issue 649714 has been merged into this issue.
,
Oct 27 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6130f81a4d918145830f585ab715b51266d16e50 commit 6130f81a4d918145830f585ab715b51266d16e50 Author: szager <szager@chromium.org> Date: Tue Sep 20 17:21:07 2016 Freeze scrollbars for relayout if overflow:auto added scrollbars. Under very specific circumstances, LayoutBlockFlow::layoutBlock will loop infinitely in this stanza: while (!done) done = layoutBlockFlow(...); ... due to fluctuations in the existence of overflow:auto scrollbars in descendants. Any layout type that does multi-pass layout is especially susceptible to this, hence this bug affecting flexbox, and another recent bug affecting tables: crbug.com/64635. This fix supercedes the existing fix for the table bug, and it should fix any other variations of this bug involving multi-pass layout and overflow:auto. Cherry-picked from https://codereview.chromium.org/2345103002 BUG= 644450 TBR=cbiesinger@chromium.org,eae@chromium.org NOTRY=true NOPRESUBMIT=true Review-Url: https://codereview.chromium.org/2345103002 Review-Url: https://codereview.chromium.org/2359523002 Cr-Original-Commit-Position: refs/heads/master@{#419035} Cr-Commit-Position: refs/branch-heads/2840@{#442} Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607} [add] https://crrev.com/6130f81a4d918145830f585ab715b51266d16e50/third_party/WebKit/LayoutTests/scrollbars/overflow-auto-infinite-loop.html [modify] https://crrev.com/6130f81a4d918145830f585ab715b51266d16e50/third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp [modify] https://crrev.com/6130f81a4d918145830f585ab715b51266d16e50/third_party/WebKit/Source/core/layout/LayoutTableSection.cpp |
|||||||||||||||
►
Sign in to add a comment |
|||||||||||||||
Comment 1 by dtapu...@chromium.org
, Sep 9 2016