Bug 20554 - [CG] Incorrect rendering of SVG path by CoreGraphics
Summary: [CG] Incorrect rendering of SVG path by CoreGraphics
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh OS X 10.5
: P2 Normal
Assignee: Nobody
Keywords: GoogleBug, HasReduction, InRadar
Depends on:
Reported: 2008-08-27 18:34 PDT by Anthony Glenning
Modified: 2014-05-12 05:25 PDT (History)
7 users (show)

See Also:

SVG file displaying the bug (842 bytes, image/svg+xml)
2008-08-27 18:39 PDT, Anthony Glenning
no flags Details
Further demonstration of CG's behavior (362 bytes, image/svg+xml)
2008-08-27 21:58 PDT, Eric Seidel (no email)
no flags Details
Pure-CG repro. (30.53 KB, application/zip)
2011-08-05 13:53 PDT, Tim Horton
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Anthony Glenning 2008-08-27 18:34:47 PDT
The svg document below is rendered with holes in the path. It seems to be related to the line-join style ("round"), as other values ("square", "miter") do not exhibit this behavior. To reproduce open this SVG document and observe the holes.

If you open this file on another SVG browser (e.g. Firefox) there are no holes in the path.

-------- bug.svg -------

 <?xml version="1.0" standalone="yes"?>

<svg version="1.1" viewBox="0.0 0.0 304800.0 228600.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<path d="M107061 74105L107061 74105C107061 69370 110899 65532 115634 65532L145510 65532L145510 65532L161989 65532L164401 65532C166675 65532 168855 66435 170463 68043C172071 69651 172974 71831 172974 74105L172974 95536L172974 95536L172974 108395L172974 108394C172974 113129 169136 116967 164401 116967L161989 116967L155829 159258L145510 116967L115634 116967L115634 116967C110899 116967 107061 113129 107061 108394L107061 108395L107061 95536L107061 95536Z" fill-rule="nonzero" fill="#cfe2f3" stroke="#073763" stroke-width="13716.0" stroke-linejoin="round" stroke-linecap="butt">

Comment 1 Anthony Glenning 2008-08-27 18:39:53 PDT
Created attachment 23047 [details]
SVG file displaying the bug
Comment 2 Mark Rowe (bdash) 2008-08-27 19:00:44 PDT
Safari and Firefox on Mac OS X display the same behaviour.  Firefox on Windows does not, while Safari on Windows does.  This may be bug in the underlying graphics library, as a common factor between all of the browsers that demonstrate the bug is the underlying graphics library (CoreGraphics).
Comment 3 Mark Rowe (bdash) 2008-08-27 19:01:13 PDT
Comment 4 Eric Seidel (no email) 2008-08-27 21:21:20 PDT
Our rendering may be wrong.  I'm not sure yet.  There is also some craziness in the path your using:

<svg viewBox="0.0 0.0 304800.0 228600.0" xmlns="http://www.w3.org/2000/svg">
<path d="
M107061 74105
L107061 74105
C107061 69370 110899 65532 115634 65532
L145510 65532
L145510 65532
L161989 65532
L164401 65532
C166675 65532 168855 66435 170463 68043
C172071 69651 172974 71831 172974 74105
L172974 95536
L172974 95536
L172974 108395
L172974 108394
C172974 113129 169136 116967 164401 116967
L161989 116967
L155829 159258
L145510 116967
L115634 116967
L115634 116967
C110899 116967 107061 113129 107061 108394
L107061 108395
L107061 95536
L107061 95536
Z" fill="none" stroke="#073763" stroke-width="13716.0" stroke-linejoin="round">

That's a reduction of what you provided.  Notice that a bunch of the line segments are repeated.  Removing some of the repetitions makes the "holes" go away.

Still investigating.
Comment 5 Eric Seidel (no email) 2008-08-27 21:39:52 PDT
Further reduction:
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<path d="
M 173 80
L 173 108.01
L 173 108
C 173 113 169 117 164 117
" fill="none" stroke="#073763" stroke-width="13" stroke-linejoin="round">
Comment 6 Eric Seidel (no email) 2008-08-27 21:48:17 PDT
So the extra line segment is clearly redundant.

The commands we're issuing to CoreGraphics (on behalf of the SVG author) are:

1. move to point (173, 80)
2. draw a line from the current point to (173, 108.01)
3. draw a line from the current point to (173, 108) // FireFox is possibly ignoring this command?
4. draw a bezier curve from the current point, using control points: (173,  113) and (169, 117) and ending at  (164 117).
Comment 7 Eric Seidel (no email) 2008-08-27 21:58:56 PDT
Created attachment 23049 [details]
Further demonstration of CG's behavior

This may be expected behavior on CG's part.  One of the Apple guys would need to ask one of the CG folks.  My recommendation is that Google work around this behavior.  I don't think we want WebKit trying to hack around this behavior.
Comment 8 Eric Seidel (no email) 2008-08-27 22:02:49 PDT
I think the CG bug (if there is one) is that kCGLineJoinRound doesn't work as expected when the line backs up over itself:

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<path d="
M 173 80
L 173 108.01
L 173 108
" fill="none" stroke="blue" stroke-width="13" stroke-linejoin="round">
Comment 9 Eric Seidel (no email) 2008-10-02 12:50:10 PDT
It would nice to get confirmation from the Apple folks that they believe this is a CG bug, and if so, then we can close this external bug.
Comment 10 Tim Horton 2011-08-05 13:53:51 PDT
Created attachment 103103 [details]
Pure-CG repro.

Attaching a CG-only reduction which makes it look like it's definitely a CG bug, as behavior changes when the view is drawn with flipped coordinate space or not. I'll file it.
Comment 11 Dirk Schulze 2011-08-05 23:21:31 PDT
(In reply to comment #10)
> Created an attachment (id=103103) [details]
> Pure-CG repro.
> Attaching a CG-only reduction which makes it look like it's definitely a CG bug, as behavior changes when the view is drawn with flipped coordinate space or not. I'll file it.

Can this be fixed in WebKit at all? Is it a WONTFIX?
Comment 12 Nikolas Zimmermann 2012-05-19 17:31:07 PDT
CC'ing Darin who might have the CG contact sot get this old bug sorted out!
Comment 13 Dirk Schulze 2014-05-12 05:25:50 PDT
Maybe CG indeed fixed something. The attached examples work correctly in Safari.