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.
Also note that the rendering artifacts do *not* appear when you remove either the outline or the box-shadow.
<rdar://problem/63509741>
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!
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.