Bug 232673 - CSS outlines in contenteditable elements causes performance issues
Summary: CSS outlines in contenteditable elements causes performance issues
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-11-03 11:15 PDT by Brian Kim
Modified: 2021-11-10 10:16 PST (History)
7 users (show)

See Also:

Attachments
Safari Devtools timeline dump (29.27 MB, application/json)
2021-11-03 11:15 PDT, Brian Kim 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Brian Kim 2021-11-03 11:15:45 PDT 
Created attachment 443215 [details]
Safari Devtools timeline dump

Typing in contenteditable elements is slow when using the default focused outline CSS rules.

Steps to reproduce:
1. Go to https://www.slatejs.org/examples/plaintext
2. Inspect the contenteditable element and disable the `outline: none` style.
3. Try inserting many newlines using the Enter key.
4. When there is a visible outline, you should see noticeable lag and frame drops as the document size increases.
5. This lag does not exist when the `outline: none` style is re-enabled.

I’ve attached a timeline export from Safari Devtools. The important detail is that in the frames view, Devtools reports that time is spent in Other (not Layout, Painting, Scripting). I do not have the ability to investigate further at this time.
Comment 1 Radar WebKit Bug Importer 2021-11-10 10:16:35 PST 
<rdar://problem/85259554>