Printing error in Chrome for SVG
Reported by
laleu...@gmail.com,
Apr 13 2018
|
||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3391.0 Safari/537.36
Example URL:
n/a
Steps to reproduce the problem:
1. Stored this html in a file and load it into Chrome:
<html>
<head>
<style>
.grid {
stroke: rgba(255, 0, 0, 0.4);
stroke-width: 15px;
stroke-dasharray: 1,5;
}
</style>
</head>
<body>
<svg width="1000" height="700" viewBox="0 0 1000 700" style="width: 1000; height: 700;">
<line x1="100" x2="100" y1="15" y2="665" class="grid"></line>
</svg>
</body>
</html>
2. Select "Print..."
3. Notice the black line overlaying the thick red dashed line.
What is the expected behavior?
No black line should appear.
What went wrong?
Black line appeared in print view.
Does it occur on multiple sites: N/A
Is it a problem with a plugin? N/A
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 67.0.3391.0 Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
,
Apr 13 2018
It does not depend on the transparency or the dash-array or the width of the stroke. It looks like there is a hairline running the length of the line. The test case removes the dash array and shows the line as transparent so you can see the extra line. Skia, would you do me the favor of verifying if it's a pdf bug or a Chrome painting bug?
,
Apr 13 2018
,
Oct 4
,
Oct 4
,
Oct 4
With my environments, it is not only a pdf bug, but also a printing bug.
And this bug is reproduced only by SVG "line" elements.
I tried some test codes with few other SVG elements ("rect", "polyline", "text",..).
They are no problem.
,
Jan 8
Dear project members,
I found some more on this issue.
The glitch black line which draw on the dashed lines is caused by "fill".
Only line or path with single line reproduce this issue.
Path with multiple lines doesn't reproduce.
And this is not only PDF writer, but also rendering for all printing.
One workaround is to set fill to "none". Then we don't see any glitch lines.
I wonder svg path only with single line generates narrow fill area on its background.
Following are additional test code for my updates,
<html>
<head>
<style>
.grid {
stroke: rgba(255, 0, 0, 0.4);
stroke-width: 15px;
stroke-dasharray: 1,5;
}
</style>
</head>
<body>
<svg viewBox="0 0 120 80">
<path d="M10 10 H 100" class="grid"/>
<path d="M10 30 H 100" class="grid" fill="none"/>
<path d="M10 50 H 100 M10 70 H 100" class="grid"/>
</svg>
</body>
</html>
|
||||
►
Sign in to add a comment |
||||
Comment 1 by dtapu...@chromium.org
, Apr 13 2018