1858421 - Pages with text-wrap:balance would cause Firefox to hang

Status: VERIFIED FIXED

(Core :: Layout: Text and Fonts, defect)

Description

[Pascal Chevrel:pascalc]

Reported to our Nightly twitter account.
https://twitter.com/GoceMitevski/status/1712035895858069837

Seems very buggy at the moment with plenty of rendering issues in v120.0a1. :-/
LinuxMint 21.2 Cinnamon with Linux 6.2.0-34-generic #34~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Sep 7 13:12:03 UTC 2 x86_64 x86_64 x86_64 GNU/Linux. A website that uses text-wrap causes a CPU spike and renders very slowly. When scrolling page is partly shown as gray blocks.
The page rendering is never entirely completed and it appears that the browser runs into some kind of infinite loop. Closing the browser is extremely slow. AMD Ryzen 7 5800X 8-Core Processor, GeForce RTX 3060 Ti

Comment 1

[Jonathan Kew [:jfkthame]]

It would be helpful to have a specific example of a page where this is a problem.

Comment 2

[Goce Mitevski]

(In reply to Jonathan Kew [:jfkthame] from comment #1)

It would be helpful to have a specific example of a page where this is a problem.

Sure. Try navigating to https://www.contestwatchers.com/. The initial page is looking good. Then, click on any of the cards to open an individual contest. Immediately after switching to a contest page, performance degrades and rendering issues sporadically appear as you scroll through the pages. The more you switch to different contests the more the performance degrades. Closing the browser keeps its process stuck in memory until it is forcefully killed.

The website works fine in other browsers that support text-wrap: balance.

I hope this helps.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

I can repro the above, and the profiler indicates massive reflows. So yeah, likely related to text-wrap.

Comment 4

[Jonathan Kew [:jfkthame]]

Yep, repros for me as well. Probably the trial-reflow loop fails to terminate; I'll look into it. Thanks for the report!

(For now, you can disable the feature by setting layout.css.text-wrap-balance.enabled to false in about:config, to avoid hanging on those pages, or others that may be similarly affected.)

Comment 5

[Goce Mitevski]

(In reply to Jonathan Kew [:jfkthame] from comment #4)

Yep, repros for me as well. Probably the trial-reflow loop fails to terminate; I'll look into it. Thanks for the report!

(For now, you can disable the feature by setting layout.css.text-wrap-balance.enabled to false in about:config, to avoid hanging on those pages, or others that may be similarly affected.)

Thanks!

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Jonathan Kew [:jfkthame] from comment #4)

I'll look into it.

[--> Assigning to reflect reality & take this off of the "unassigned high-severity bugs" list.]

Comment 7

[Jonathan Kew [:jfkthame]]

This seems to be triggered by the fact that those pages set text-wrap: balance way out on the main body, and it is then inherited into all the various child blocks (and eventually the blocks that actually contain lines of text).

Attempting to do "balancing" on the outer blocks that themselves have many levels of block descendants (rather than lines of text) doesn't make much sense, but all the trial reflows of those outer blocks will cause repeated reflows of their children.... which have also inherited the balance setting, and so do their own trials....

A simple fix here is to disable balancing for blocks that themselves have block children, so we'll only apply this behavior to blocks that actually contain lines that can potentially be re-wrapped for better balance.

Comment 8

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1858421 - Don't attempt text-wrap:balance if there are block line-boxes. r=#layout

Comment 9

[Jonathan Kew [:jfkthame]]

(I haven't got a nice minimized testcase here yet, but confirmed locally that with the patch, the contestwatchers.com pages no longer hang when attempting to load.)

Comment 10

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1858421 - Add crashtest for text-wrap:balance with many nested blocks. r=#layout

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9e1a2dd337b8
Don't attempt text-wrap:balance if there are block line-boxes. r=emilio
https://hg.mozilla.org/integration/autoland/rev/d3c6163a42b6
Add crashtest for text-wrap:balance with many nested blocks. r=emilio

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42509 for changes under testing/web-platform/tests

Comment 13

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/9e1a2dd337b8
https://hg.mozilla.org/mozilla-central/rev/d3c6163a42b6

Comment 14

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 15

[Ina Popescu, Desktop QA]

I've reproduced this issue using 120.0a1 (2023-10-11) on Windows10 x64 following the STR from Comment 2.
Verified as fixed in the latest Nightly 121.0a1 (2023-10-31) and Firefox 120.0b4 versions on Windows10 x64, macOS 11 ARM and Ubuntu 22.04 where the issue no longer persists.