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

Description Robbert Brak 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.
Comment 1 Robbert Brak 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.
Comment 2 Radar WebKit Bug Importer 2020-05-21 14:11:38 PDT 
<rdar://problem/63509741>
Comment 3 Ahmad Saleem 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!
Comment 4 Dmitry Chestnykh 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.