Bug 137455 - SVG, Web font, and Border-radius Rendering Issues
Summary: SVG, Web font, and Border-radius Rendering Issues
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: Mac OS X 10.9
: P2 Normal
Assignee: Nobody
URL: https://collegetrack.org
Keywords:
Depends on:
Blocks:
 
Reported: 2014-10-06 12:18 PDT by Derek Nelson
Modified: 2014-10-06 12:18 PDT (History)
0 users

See Also:


Attachments
Screenshot comparison of Safari and Chrome (740.51 KB, image/jpeg)
2014-10-06 12:18 PDT, Derek Nelson
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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