Layout problem with Chrome 102

[MurakamiShinyu]

I tested Vivliostyle Viewer with Chrome 102 (currently, Google Chrome CanaryBeta) and found layout problems which are not found with Chrome 101 (currently, Google Chrome Beta) and older versions.

Test cases

Test 1:

https://vivliostyle.org/viewer/#src=https://vivliostyle.github.io/vivliostyle_doc/samples/gutenberg/Alice.html&bookMode=true&userStyle=data:,/*%3Cviewer%3E*/%0A@page%20%7B%20size:%20a5;%20%7D%0A/*%3C/viewer%3E*/

(This test is from issue #793)

See page 33.

Result screenshot (Chrome 102):

The overflowed text "me," is shown at end of page. Note that there is no forced break after the text "me," in the source HTML https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/Alice.html#L908.

Test 2

https://vivliostyle.org/viewer/#src=https://jagat-xpub.github.io/cosmology/&userStyle=data:,/*%3Cviewer%3E*/%0A@page%20%7B%20size:%20a5;%20%7D%0A/*%3C/viewer%3E*/

(This test is from issue #758)

Result screenshot (Chrome 102):

I found that the result changes when display resolution setting window.devicePixelRatio changes. The above result is with window.devicePixelRatio == 1 and the below is with window.devicePixelRatio == 2:

Test 3

https://vivliostyle.org/viewer/#src=https://www.aozora.gr.jp/cards/000119/files/624_14544.html&userStyle=data:,/*%3Cviewer%3E*/%0A@page%20%7B%20size:%20a5;%20%7D%0A:root,%20body%20%7B%20margin:%200%20!important;%20%7D%0A/*%3C/viewer%3E*/%0A@page%20%7B%0A%20%20outline:%201px%20solid%20silver;%0A%7D

(This test is from issue #816)

Result screenshot (Chrome 102):

In this case, the text overflow problem is shown in print but not in viewer.

Test 4

https://vivliostyle.org/viewer/#src=https://gist.githack.com/MurakamiShinyu/dd8d656b7a2d27b432551f0753e87356/raw/test-hyphenation.html

(This test is from issue #793)

Result screenshot (Chrome 102):

In this case, the hyphenation results differ between viewer and print.

[MurakamiShinyu]

Update (Chrome 103)

I tested the latest Google Chrome Canary 103.0.5014.0 and found that the problems on Test 1 and Test 2 did not occur, but the problems on Test 3 and Test 4 still occurred.

[MurakamiShinyu]

The problems on Test 1 and Test 2 are not found in Chrome 103 but still found in Chrome 102 (currently Chrome Beta, and will be same in the Release version), and the problems on Test 3 and Test 4 will not be resolved until the following Chromium issue is fixed:

• Chromium bugs - Issue 1121942: [LayoutNG] Implement printing

The problem is that different layout engines (LayoutNG and the legacy one) are used for screen display and printing, and the results do not match.

There were a workaround:

• fix: Workaround for Chromium problem of inconsistent screen and print layout #795

that uses multi-column layout, in Chromium the same legacy layout engine was used both printing and multi-column in screen, but this workaround is no longer effective because the layout engine for multi-column layout is changed to LayoutNG from Chromium 102.

So we should not use Chromium 102 and later version (especially on Vivliostyle CLI) until this Chromium issue is resolved.

[MurakamiShinyu]

I found a workaround for this problem:

• fix: Layout problem with Chrome>=102 #939

[MurakamiShinyu]

Note: From the Chromium issue, https://bugs.chromium.org/p/chromium/issues/detail?id=1121942#c79:

(Is there any estimated timeline on when the printing side of things here will be released?)

We're hoping around Chrome 108. But no promises. :)
If you want to test it out already, run Chrome with --enable-blink-features=LayoutNGPrinting . Feel free to file bugs.

[bfgeek]

Hi @MurakamiShinyu we are tentatively looking at enabling LayoutNGPrinting for M108 by default (still no promises however) - please let us know if you find any issue.

[MurakamiShinyu]

Hi @bfgeek, I have posted the following Chromium issues on LayoutNGPrinting:

• Issue 1342022: Extra blank page is generated on printing when content size is same as page area size
• Issue 1342107: Wrong positioning with position:absolute on printing (LayoutNGPrinting)

Apart from these, LayoutNGPrinting works fine. Thank you!