Bug 212197

Summary: Rendering artifacts on contenteditable element with box-shadow and outline
Product: WebKit Reporter: Robbert Brak <robbert.brak>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, dino, dmitry, mmaxfield, rniwa, robbert.brak, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Rendering artifacts none

Robbert Brak
Reported 2020-05-21 04:37:01 PDT
Created attachment 399950 [details] Rendering artifacts To reproduce: 1) Create a page with the following HTML: <div class="editor" contenteditable="true" /> and the following CSS: .editor { width: 400px; min-height: 40px; border: 1px solid blue; border-radius: 2px; box-shadow: 0 0 4px rgba(51,136,221,0.5); outline: 4px solid transparent; padding: 4px; } See also https://codepen.io/rubrick/pen/rNOPLGW. 2) Put the cursor in the contenteditable box and press <enter> a few times. Result: rendering artifacts appear along the edges of the box, as seen in the attachment. These artifacts disappear when you resize the browser.
Attachments
Rendering artifacts (66.24 KB, image/png)
2020-05-21 04:37 PDT, Robbert Brak 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Robbert Brak
Comment 1 2020-05-21 04:38:36 PDT
Also note that the rendering artifacts do *not* appear when you remove either the outline or the box-shadow.
Radar WebKit Bug Importer
Comment 2 2020-05-21 14:11:38 PDT
<rdar://problem/63509741>
Ahmad Saleem
Comment 3 2022-07-26 04:58:47 PDT
I am able to reproduce this issue in Safari 15.6 on macOS 12.5 using CodePen from Comment 0 and these rendering artifacts match with the screenshot from attachment. All other browsers does not have these rendering artifacts. Just wanted to update testing results. Thanks!
Dmitry Chestnykh
Comment 4 2022-08-28 04:51:34 PDT
Maybe related: Open the following document: <!doctype html><html><meta charset="utf-8"><head></head><body contenteditable="true" style="line-height: 0.5; margin-top: 20px;">𒐪</body></html> Add a few spaces before the Unicode rune — notice that the rune itself is cut, leaving the artifacts above and below the editing area. Tested on 253879@main.
Note You need to log in before you can comment on or make changes to this bug.