Bug 249307 – SVG stroke-dashoffset negative values are rendered with wrong offsets

• Status: NEW
• Component: SVG

Created attachment 464039 [details]
negative-dash.svg

Negative dash offset values in the stroke-dashoffset property are rendered incorrectly if the stroke-dasharray property has an odd number of values (e.g. "60", "60 90 30" etc). Negative dash offset values are rendered correctly if the stroke-dasharray has an even number of values (e.g. "60 60", "60 60 10 20" etc).

The attached negative-dash.svg test file can be used to test the rendering.

The expected result is that the left and right side rendering looks identical. Safari renders the lines marked with blue text incorrectly, see the attached file safari-16.1-dashoffset.png. Tested on Safari 16.1 and Safari Tech Preview Release 159 (Safari 16.4, WebKit 17615.1.12.130.1).

Chrome 108 and Firefox 107 render all lines correctly. They render the animation so that it doesn't jump when the value is animated from a negative value to a positive value.

I also tested on macOS 10.6.8 Snow Leopard Safari version 5.1.10 (6534.59.10) and it renders all lines correctly (see the file safari-5.1.10-dashoffset.png). Safari 10.1.2 on macOS 10.12.6 Sierra gives the same incorrect result as Safari 16.1, so it seems that the bug appeared between Safari 5 and 10..

Note that there is currently an open issue about this on the SVG working group's repository: https://github.com/w3c/svgwg/issues/795 - but to me this looks like a regression which happened after Safari 5.

Created attachment 464040 [details]
safari-5.1.10-dashoffset.png

Created attachment 464041 [details]
safari-16.1-dashoffset.png

[Radar WebKit Bug Importer]

<rdar://problem/103596361>