[WebKit] SVG circle stroke not rotated properly

Originator:radexpl
Number:rdar://27763347 Date Originated:09-Aug-2016 01:02 PM
Status:Open Resolved:
Product:iOS SDK Product Version:10.0 beta 4
Classification:UI/Usability Reproducible:Always
 
Summary:

In some cases, a SVG <circle> using the `stroke-dasharray` property to achieve a “circle filling” effect does not respect the `transform: rotate()` property properly on iOS

Steps to Reproduce:

Open the svg.html test case attached on an iOS 10 device.

Expected Results:

The circle should appear as in <ExpectedResult.png>

Actual Results:

The circle appears as in <ActualResult.png>, with the circle starting at the 3 o’clock point instead of 12 o’clock.

Regression:

This is a regression since iOS 9.3. The bug also, curiously, does not reproduce on Safari Technology Preview (Release 10; running on 10.11.6), and appears to be iOS-specific. (It reproduces both on Safari and UIWebView)

Notes:

While this won’t reproduce on the test case (missing some divs around), a transform `rotate(-87deg)` instead of `rotate(-90deg)` would work, forcing the circle to rotate ¯\_(ツ)_/¯

Comments

I am able to reproduce this in Safari 10.0.1 running on macOS Sierra 10.12.1.

By benoit.rouleau at Oct. 26, 2016, 12:10 p.m. (reply...)

Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!