<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 - Animating border-radius is blocky on iPad"
href="https://bugs.webkit.org/show_bug.cgi?id=145929">145929</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Animating border-radius is blocky on iPad
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 8.2
</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>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>julienq@apple.com
</td>
</tr>
<tr>
<th>CC</th>
<td>webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=254799" name="attach_254799" title="CSS and SVG circles animating side-by-side; CSS looks blocky on iPad.">attachment 254799</a> <a href="attachment.cgi?id=254799&action=edit" title="CSS and SVG circles animating side-by-side; CSS looks blocky on iPad.">[details]</a></span>
CSS and SVG circles animating side-by-side; CSS looks blocky on iPad.
A simple way to represent a circle with CSS is to have a <div> element with the same width and height (effectively square) and set its border-radius to half its size. Animating the scale of the element at small sizes on iPad however results in a blocky appearance, where the circle looks more like a square with rounder corners than a circle. Safari and Chrome on OS X look OK (but Firefox looks terrible.)
Included is a test file that shows the problem, with an SVG circle on the right for comparison (the animation of the SVG circle could also use some improvement on iPad when compared to OS X, but it’s definitely better than the CSS one.)</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>