New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 621258 link

Starred by 12 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Jul 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 3
Type: Bug



Sign in to add a comment

Table printing: thead overlaps content if combined height of thead and data row exceeds page height

Reported by db...@gwaea.org, Jun 18 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2770.0 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Create an HTML page with a table in which the thead by itself fits on a page, but the combined height of the thead and an unbreakable section of the tbody is too large.

2. Look at the print preview.

Test case 1 (tall header): https://jsfiddle.net/xu6hz61h/

Test case 2 (tall tbody section): https://jsfiddle.net/5cvco6e9/

What is the expected behavior?
Behave like Firefox and Internet Explorer. Their solution has 2 parts:

1. If the thead takes up more than ~ 1/3 printable page height, it doesn't repeat.

2. If the thead is NOT too tall to repeat, then the tbody content is broken up as necessary, even if normally unbreakable.

What went wrong?
The tbody content prints on top of the thead, often after several pages with nothing but the thead. Behavior varies depending on page break location and relative sizes of the thead and unbreakable tbody section-- but it's always bad.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 53.0.2770.0  Channel: canary
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

This is only a problem if repeating table headers are enabled.
 
Components: -Blink Blink>Layout>Table

Comment 2 by e...@chromium.org, Jun 22 2016

Components: Internals>Printing
Labels: -Pri-2 Pri-3
Status: Available (was: Unconfirmed)
Cc: robho...@gmail.com
+Rob if interested.
The draft spec covering the correct/consensus behavior here:

https://drafts.csswg.org/css-tables-3/#repeated-headers
Project Member

Comment 5 by bugdroid1@chromium.org, Aug 3 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b69173bcab740a91977294f1dc2f024b398cebf5

commit b69173bcab740a91977294f1dc2f024b398cebf5
Author: robhogan <robhogan@gmail.com>
Date: Wed Aug 03 01:12:34 2016

Don't repeat header groups when one row of content doesn't fit on the first page

https://drafts.csswg.org/css-tables-3/#repeated-headers tells us that where
there isn't 'enough space to insert at least one content row, users agents
must drop the repeated header.'

BUG= 621258 

Review-Url: https://codereview.chromium.org/2199553002
Cr-Commit-Position: refs/heads/master@{#409413}

[add] https://crrev.com/b69173bcab740a91977294f1dc2f024b398cebf5/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-exceeds-page-size-expected.txt
[add] https://crrev.com/b69173bcab740a91977294f1dc2f024b398cebf5/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-exceeds-page-size.html
[add] https://crrev.com/b69173bcab740a91977294f1dc2f024b398cebf5/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-no-room-for-content-row-on-first-page-expected.txt
[add] https://crrev.com/b69173bcab740a91977294f1dc2f024b398cebf5/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-no-room-for-content-row-on-first-page.html
[modify] https://crrev.com/b69173bcab740a91977294f1dc2f024b398cebf5/third_party/WebKit/Source/core/layout/LayoutBox.cpp
[modify] https://crrev.com/b69173bcab740a91977294f1dc2f024b398cebf5/third_party/WebKit/Source/core/layout/LayoutTable.cpp
[modify] https://crrev.com/b69173bcab740a91977294f1dc2f024b398cebf5/third_party/WebKit/Source/core/layout/LayoutTableSection.cpp

Comment 6 by db...@gwaea.org, Aug 3 2016

Might be better to follow IE & FF's lead on this-- they've had many years to arrive at sensible solutions to these kinds of issues. For example, there's a reason they limit repeating header/footer size more than is strictly required (i.e. it protects the user from unintentionally printing out reams of nearly-identical pages). I think the spec has some catching up to do.
Project Member

Comment 7 by bugdroid1@chromium.org, Sep 25 2016

Labels: merge-merged-2785
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/63aa3546435d26b42b41000320cd8706a9f3e511

commit 63aa3546435d26b42b41000320cd8706a9f3e511
Author: Robert Hogan <robhogan@gmail.com>
Date: Sun Sep 25 17:49:33 2016

Don't repeat header groups when one row of content doesn't fit on the first page

https://drafts.csswg.org/css-tables-3/#repeated-headers tells us that where
there isn't 'enough space to insert at least one content row, users agents
must drop the repeated header.'

BUG= 621258 

Review-Url: https://codereview.chromium.org/2199553002
Cr-Commit-Position: refs/heads/master@{#409413}
(cherry picked from commit b69173bcab740a91977294f1dc2f024b398cebf5)

Review URL: https://codereview.chromium.org/2367243002 .

Cr-Commit-Position: refs/branch-heads/2785@{#927}
Cr-Branched-From: 68623971be0cfc492a2cb0427d7f478e7b214c24-refs/heads/master@{#403382}

[add] https://crrev.com/63aa3546435d26b42b41000320cd8706a9f3e511/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-exceeds-page-size-expected.txt
[add] https://crrev.com/63aa3546435d26b42b41000320cd8706a9f3e511/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-exceeds-page-size.html
[add] https://crrev.com/63aa3546435d26b42b41000320cd8706a9f3e511/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-no-room-for-content-row-on-first-page-expected.txt
[add] https://crrev.com/63aa3546435d26b42b41000320cd8706a9f3e511/third_party/WebKit/LayoutTests/fragmentation/repeating-thead-no-room-for-content-row-on-first-page.html
[modify] https://crrev.com/63aa3546435d26b42b41000320cd8706a9f3e511/third_party/WebKit/Source/core/layout/LayoutBox.cpp
[modify] https://crrev.com/63aa3546435d26b42b41000320cd8706a9f3e511/third_party/WebKit/Source/core/layout/LayoutTable.cpp
[modify] https://crrev.com/63aa3546435d26b42b41000320cd8706a9f3e511/third_party/WebKit/Source/core/layout/LayoutTableSection.cpp

Labels: Needs-Feedback
Verified the issue on Windows 10 using chrome stable version #53.0.2785.146 as per the comment #0
Observed that:
1. Test case 1 (tall header): https://jsfiddle.net/xu6hz61h/ is working as expected.
2. Test case 2 (tall tbody section): https://jsfiddle.net/5cvco6e9/ still seems to have issue.

Attaching screencast for reference

robhogan@ - Could you please have a look into the screencast and let us know if the issue is fixed ?
621258.mp4
1.2 MB View Download

Comment 9 by gov...@chromium.org, Sep 28 2016

Cc: ananthak@chromium.org pbomm...@chromium.org kerz@chromium.org amineer@chromium.org
This is a P3 bug exists before M53 branching got merged to Stable without Merge request and approval. 

Change listed at #5 has been in Canary/Dev/Beta since August 3rd.
The header is also rendered multiple times on the same page. This can be seen in the following example when there is content before the table. https://jsfiddle.net/5cvco6e9/3/
Screen Shot 2016-09-28 at 9.09.39 AM.png
39.0 KB View Download
As per comment #8 the 2nd test case is still having issue.
Tested the tbody content using chrome stable version #53.0.2785.146 and chrome market stable version #53.0.2785.116 as per comment 10 using the link https://jsfiddle.net/5cvco6e9/3/

Observed the same issue as mentioned in that comment.

Attaching screenshots for reference
621258@53.0.2785.116.PNG
45.2 KB View Download
621258@53.0.2785.146.PNG
32.1 KB View Download

Comment 12 by ajha@chromium.org, Sep 29 2016

Cc: -robho...@gmail.com robhogan@chromium.org
The CL in C#5 could be related to  Issue 624814  as well.
The exact same buggy behavior is present on Ubuntu as well.

Ubuntu 16.04.1 LTS Chrome Version 55.0.2883.87 (64-bit)
Status: Fixed (was: Available)

Comment 15 Deleted

This issue is marked as "Fixed" but I see the problem when I try to print the markup given in the following StackOverflow question, in Chrome 60.0.3112.113.

https://stackoverflow.com/questions/45555419/when-printing-tables-in-google-chrome-content-overlaps-header

Comment 17 by robho...@gmail.com, Aug 25 2017

Opened  issue 759195  to cover this new issue.

Comment 18 Deleted

Hi everyone,
I still have thead overlapping tbody. For me it happens when column content is of different size. See attachments in print-preview.

Chromium 66.0.3359.181 (64-Bit Ubuntu 18.04)
chrome-print-repeated-thead-no-overlap-correct.html
3.8 KB View Download
chrome-print-repeated-thead-overlap-with-body-incorrect.html
3.7 KB View Download
paul -- is this the same as issue 794096?

If not, open a new issue, referring to 794096 and this one.

Comment 21 Deleted

It seems not the same as in my example the text overlaps not just wrong bg-color. I create a new issue: https://bugs.chromium.org/p/chromium/issues/detail?id=850487

Thanks
Cc: -amineer@chromium.org

Sign in to add a comment