<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - SVG circles with stroke-dashoffset can no longer rotate at 90 degree intervals via CSS"
href="https://bugs.webkit.org/show_bug.cgi?id=166028">166028</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>SVG circles with stroke-dashoffset can no longer rotate at 90 degree intervals via CSS
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 10
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>SVG
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>greg@substantial.com
</td>
</tr>
<tr>
<th>CC</th>
<td>zimmermann@kde.org
</td>
</tr></table>
<p>
<div>
<pre>I'm unable to get SVG circles with the stroke-dashoffset property to properly rotate at 90 degree intervals (90, 180, 270) using the transform: rotate() CSS property. It renders as if no rotation transform was applied. Values at other degrees rotate correctly (even point values such as 90.1 and 180.1). SVG rectangles appear to rotate properly. I've created a codepen that shows the problem here: <a href="http://codepen.io/gmusick/pen/qqgMvp">http://codepen.io/gmusick/pen/qqgMvp</a>.
I'm on Safari 10.0.1 on Mac 10.12.1. This also repros on Safari for iOS 10.1. This works, however, on Safari 10.0.1 on Mac 10.11.6.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>