[print] Transformed image element not respecting parent styles in print
Reported by
michael....@gmail.com,
Oct 8 2017
|
||||||
Issue descriptionChrome Version : 61.0.3163.100 OS Version: 10.0 URLs (if applicable) : https://jsfiddle.net/ws5gn6vg/ Other browsers tested: Add OK or FAIL after other browsers where you have tested this issue: Firefox 56: OK IE 11: OK Edge 40: OK What steps will reproduce the problem? 1. Setup an HTML page and CSS styles for that page per what is in the jsfiddle What is the expected result? The IMG element will be contained and clipped properly by the overflow hidden property of the parent elements. What happens instead of that? Only the SVG element is contained. The IMG element bleeds into the print margins and other print pages. Please provide any additional information below. Attach a screenshot if possible. UserAgentString: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 So I'm having an issue during print with Chrome that I cannot reproduce in Internet Explorer, Edge, or Firefox. Here's the situation: I have a page container for print content, I have another container, positioned absolutely within this container and it has specific width and height styles. Inside of this there is a third container which has various CSS transform properties on it, one of which is scale. The third container is scaled up much larger than the other container and positioned to perform a "zoom" on the content. The content being scaled up contains an SVG and a sibling image. The image is set with a z-index lower than the SVG, so that the SVG floats on top. Both are positioned absolutely and sized the same. Viewing the HTML of the page, everything looks fine. No issues. However, when I go to print, the image bleeds onto other print pages. It goes outside of the bounds of the overflow hidden container, outside the print page bounds, and even into the margin of the print. The same behavior is not exhibited by the sibling SVG. The SVG respects the bounds of the parent elements. This only happens with the image element. I have setup a JSFiddle to demonstrate using generic HTML, Styles, and a test image: https://jsfiddle.net/ws5gn6vg/. If you open this link in any of the other browsers I mentioned above, this does not occur. I would expect that the way the page is displayed is the way it would print in Chrome. Is there any way this could get looked at? If there's any other information I can provide to assist, please let me know. Thank you, -Michael
,
Oct 10 2017
Able to reproduce the issue on Windows 10, mac 10.12.6, Ubuntu 14.04 using stable build 61.0.3163.100. Issue is a regression broken in M61 builds. Below are the bisect details for the same: Bisect info: ============ 61.0.3143.0 - Good build 61.0.3144.0 - Bad build Using per revision bisect got the following details. Change Log: https://chromium.googlesource.com/chromium/src/+log/35483c504bb197da94e4f4093426c7d26023e24f..2f502a91eb07a2c8f68f9c83d250a5d39c76327f CL: https://chromium.googlesource.com/chromium/src/+/2f502a91eb07a2c8f68f9c83d250a5d39c76327f @ chrishtr: Assigning to you, request you to please take a look into it. Thanks.!
,
Oct 15 2017
This happens with any image that overflows the 'page' on the bottom edge, by 1px or more. Even if the page container has overflow: hidden, the image is not clipped and the entire image is pushed to the next page. It appears to clip properly if the image overflows the page top, left, or right sides.
,
Oct 15 2017
Attached screenshots of behavior. Note that html.png is the preview (from an in-browser editor). The images along the corners are 50px by 50px. They are offset -20px toward the outside edges. The top two images are clipped as expected. The bottom corner images are shifted upward (by what looks like 20px?). Meanwhile the bottom center image, which does not overflow, is rendered correctly.
,
Oct 16 2017
I opened a separate issue for my previous comment, linking here: https://bugs.chromium.org/p/chromium/issues/detail?id=774970
,
Oct 17 2017
I think there might be a bug in the PDF rendering skia backend. The Blink display list for the second page has a zero-sized clip, as does the PaintOpBuffer that is output.
,
Oct 17 2017
halcanary@, can you take a look? To reproduce: 1. Load test2.html 2. Ctrl-P 3. Look at the second printed page. The image inside the transform is not clipped, even though it's surrounded by an empty clip.
,
Oct 23 2017
,
Dec 13 2017
Is there anything additional that could be provided to help track this down?
,
Jan 4 2018
What is the status on this? Last update was from October.
,
Jan 9 2018
Even simpler example: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> https://crbug.com/772685 </title> <style> .c1 { width:700px; height:900px; box-sizing:border-box; border:8px solid #ef8a62; overflow:hidden; position:relative; page-break-after:auto; page-break-inside:avoid; } .c3 { transform:translate(-4500px, 0) scale(15, 15); } .c4 { width:700px; height:900px; background-color:#999999; } </style> </head> <body> <div class="c1"> <div class="c3"> <div class="c4"> </div> </div> </div> <div class="c1"> <div class="c3"> </div> </div> </body> </html>
,
Feb 6 2018
Issue 805858 has been merged into this issue.
,
Feb 6 2018
@halcanary: any update? Another duplicate of this was just filed.
,
Feb 23 2018
Issue 813720 has been merged into this issue.
,
Mar 6 2018
Any update on this?
,
Mar 7 2018
I also posted a similar bug. This one impacts any element which overlaps the wrapping page. Please see: https://bugs.chromium.org/p/chromium/issues/detail?id=819735
,
Mar 9 2018
Fix on the way: https://review.skia.org/113462
,
Mar 9 2018
Great! Will this impact similar/related issues? https://bugs.chromium.org/p/chromium/issues/detail?id=774970 https://bugs.chromium.org/p/chromium/issues/detail?id=819735
,
Mar 9 2018
Very probably. I'll take a look.
,
Mar 12 2018
Fixed, I think. Please confirm.
,
Mar 12 2018
Tested on Version 67.0.3368.0 (Official Build) canary (64-bit), and it seems to at least have fixed our use case (Issue https://bugs.chromium.org/p/chromium/issues/detail?id=805858 ) Thanks, great work!
,
Mar 12 2018
Unfortunately does not fix these (headless printToPDF): https://bugs.chromium.org/p/chromium/issues/detail?id=819735 https://bugs.chromium.org/p/chromium/issues/detail?id=774970 Tested on Chromium 67.0.3369.0 (64-bit) |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by nyerramilli@chromium.org
, Oct 9 2017