Bug 224853

Summary: Jaggies on dashed border when rotated
Product: WebKit Reporter: Xidorn Quan <xidorn-webkit>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: CanvaBug, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
testcase
none
screenshot of the testcase none

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?