Bug 137455

Summary: SVG, Web font, and Border-radius Rendering Issues
Product: WebKit Reporter: Derek Nelson <matthewdereknelson>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal    
Priority: P2    
Version: 525.x (Safari 3.2)   
Hardware: Mac   
OS: OS X 10.9   
URL: https://collegetrack.org
Attachments:
Description Flags
Screenshot comparison of Safari and Chrome none

Description Derek Nelson 2014-10-06 12:18:23 PDT 
Created attachment 239347 [details]
Screenshot comparison of Safari and Chrome

I’m seeing multiple rendering issues in Safari. I'll use https://collegetrack.org as an example.

1. SVG
On collegetrack.org the round, blue CT logo mark is an SVG image and is a perfect circle, but Safari doesn’t render it perfectly round – there are obvious points in the curve that break the circle. 

2. Web Fonts
The “Make College Graduation a Reality” headline in the hero area is a Typekit web font. Like the SVG problem above, the text renders poorly on curves. You’ll notice this in the a’s, o’s, c’s, and e’s the most. 

3. Border-radius
The corners on border-radius rendered elements doesn’t display a perfect radius – it looks as though the radius is stretch. You’ll notice this on the top right green “Donate” button and “Learn more about our results” button under the “Our Impact is Measurable” section in the middle of the page. 

These are all issue’s that I’ve compared to Google Chrome, which renders as expected. Here's a screenshot comparison: http://d.pr/i/1ktaX