145929 2015-06-12 07:37:33 -0700 Animating border-radius is blocky on iPad 2015-07-12 16:55:36 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) iPhone / iPad iOS 8.2 NEW InRadar P2 Normal --- 1 julienq webkit-unassigned dbates hyatt simon.fraser webkit-bug-importer zalan oldest_to_newest 1101584 0 254799 julienq 2015-06-12 07:37:33 -0700 Created attachment 254799 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.) 1101585 1 webkit-bug-importer 2015-06-12 07:37:49 -0700 <rdar://problem/21357691> 254799 2015-06-12 07:37:33 -0700 2015-06-12 07:37:33 -0700 CSS and SVG circles animating side-by-side; CSS looks blocky on iPad. circle.html text/html 1298 julienq PCFET0NUWVBFIGh0bWw+CjxodG1sPgogICAgPGhlYWQ+CiAgICAgICAgPHRpdGxlPkNpcmNsZTwv dGl0bGU+CiAgICAgICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogICAgICAgIDxtZXRhIG5hbWU9 InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIHVzZXItc2NhbGFibGU9bm8i PgogICAgICAgIDxzdHlsZT4KICAgICAgICAgICAgLmNpcmNsZSB7CiAgICAgICAgICAgICAgICBi YWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjYsIDEyOSwgMjUxKTsKICAgICAgICAgICAgICAgIHdpZHRo OiAyMnB4OwogICAgICAgICAgICAgICAgaGVpZ2h0OiAyMnB4OwogICAgICAgICAgICAgICAgYm9y ZGVyLXJhZGl1czogMTFweDsKICAgICAgICAgICAgICAgIGFuaW1hdGlvbjogcHVsc2UgM3MgaW5m aW5pdGUgbGluZWFyOwogICAgICAgICAgICAgICAgLXdlYmtpdC1hbmltYXRpb246IHB1bHNlIDNz IGluZmluaXRlIGxpbmVhcjsKICAgICAgICAgICAgfQogICAgICAgICAgICBAa2V5ZnJhbWVzIHB1 bHNlIHsKICAgICAgICAgICAgICAgIDUwJSAgeyB0cmFuc2Zvcm06IHNjYWxlKC43NSk7IH0KICAg ICAgICAgICAgfQogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgcHVsc2UgewogICAgICAg ICAgICAgICAgNTAlICB7IC13ZWJraXQtdHJhbnNmb3JtOiBzY2FsZSguNzUpOyB9CiAgICAgICAg ICAgIH0KICAgICAgICAgICAgc3ZnIHsKICAgICAgICAgICAgICAgIHdpZHRoOiAyMnB4OwogICAg ICAgICAgICAgICAgaGVpZ2h0OiAyMnB4OwogICAgICAgICAgICB9CiAgICAgICAgICAgIC5jaXJj bGUsIHN2ZyB7CiAgICAgICAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICAgICAg ICAgICAgICBtYXJnaW46IDhweDsKICAgICAgICAgICAgfQogICAgICAgIDwvc3R5bGU+CiAgICA8 L2hlYWQ+CiAgICA8Ym9keT4KICAgICAgICA8ZGl2IGNsYXNzPSJjaXJjbGUiPjwvZGl2PgogICAg ICAgIDxzdmcgdmlld0JveD0iLTExIC0xMSAyMiAyMiI+CiAgICAgICAgICAgIDxjaXJjbGUgcj0i MTEiIGZpbGw9InJnYigyNiwgMTI5LCAyNTEpIj4KICAgICAgICAgICAgICAgIDxhbmltYXRlVHJh bnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYXR0cmlidXRlVHlwZT0iWE1MIiB0eXBl PSJzY2FsZSIKICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7MC43NTsxIiBkdXI9IjNzIiBy ZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgY2FsY01vZGU9ImxpbmVhciIvPgogICAgICAgICAgICA8 L2NpcmNsZT4KICAgICAgICA8L3N2Zz4KICAgIDwvYm9keT4KPC9odG1sPgo=