Bug 137455 – SVG, Web font, and Border-radius Rendering Issues

• Component: Layout and Rendering
• Status: NEW

[Derek Nelson]

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