Bug 200705 - background-clip: text and rotation shows pixel artifacts
Summary: background-clip: text and rotation shows pixel artifacts
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-08-14 01:37 PDT by Mark cormack
Modified: 2019-08-14 16:58 PDT (History)
4 users (show)

See Also:


Attachments
Contains image of results, HTML to reproduce issue (506.92 KB, application/zip)
2019-08-14 01:37 PDT, Mark cormack
no flags Details
Testcase (3.26 KB, text/html)
2019-08-14 16:57 PDT, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Mark cormack 2019-08-14 01:37:21 PDT
Created attachment 376249 [details]
Contains image of results, HTML to reproduce issue

Using -webkit-background-clip and using transform: rotation has the desired result of clipping and rotating text, but has the side effect of adding a slim 0.5 pixel dashed border. This occurs independent of the font used, so not related to the font. Removing rotation fixes issue. This issue is specific to Webkit Safari both on iPhone and Mac using latest OS. Handles as expected without border in Chrome/Chromium Edge/Firefox.

Work around: use SVG text element instead to achieve the same effect without the border.

Test file attached to reproduce this issue
Comment 1 Radar WebKit Bug Importer 2019-08-14 16:55:59 PDT
<rdar://problem/54325642>
Comment 2 Simon Fraser (smfr) 2019-08-14 16:57:47 PDT
Created attachment 376333 [details]
Testcase