Bug 224853 - Jaggies on dashed border when rotated
Summary: Jaggies on dashed border when rotated
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: CanvaBug, InRadar
Depends on:
Blocks:
 
Reported: 2021-04-20 21:48 PDT by Xidorn Quan
Modified: 2022-08-15 12:39 PDT (History)
4 users (show)

See Also:

Attachments
testcase (147 bytes, text/html)
2021-04-20 21:48 PDT, Xidorn Quan 		no flags Details
screenshot of the testcase (9.65 KB, image/png)
2021-04-20 21:52 PDT, Xidorn Quan 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Xidorn Quan 2021-04-20 21:48:51 PDT 
Created attachment 426643 [details]
testcase

See the testcase. When a dashed border is rotated, it shows significant aliasing around it.

This is only a problem in Safari, and neither Firefox nor Chrome has the same issue.

In Canva, we currently workaround this issue via using background-image: linear-gradient, but it is significantly more complicated then it needs to.
Comment 1 Xidorn Quan 2021-04-20 21:52:47 PDT 
Created attachment 426644 [details]
screenshot of the testcase

It can be seen from the screenshot there is serious aliasing.
Comment 2 Simon Fraser (smfr) 2021-04-21 09:12:37 PDT 
Looks like we should enable context antialiasing when painted dashed borders in a context with a transform.
Comment 3 Radar WebKit Bug Importer 2021-04-27 21:49:13 PDT 
<rdar://problem/77248219>
Comment 4 Simon Fraser (smfr) 2022-08-15 10:46:26 PDT 
I can no longer reproduce this bug. What OS/Safari versions does it occur on?