Slow Performance in Safari

In Safari, Lexical performance becomes unacceptably slow in as little as ~400 characters in a plaintext document.

This this CodeSandbox as an example. In just a few hundred characters, the latency on my M1 MacBook Air makes the editor difficult to use.

This sandbox is using:

• Lexical 0.2.4
• React 18

I’ve been testing with this short document:

1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

[jclem]

We let the user define the CSS for their content editable, as outline has clear benefits for accessibility reasons.

Makes sense! I wouldn’t expect Lexical to enforce any visual styling.

Another thing, did you find the outline: none and outline: 0 performed differently?

Nah—outline: none and outline: 0 are equivalent, performance-wise, as far as I can tell. I also tested manual outlines with box-shadow and border, and they also perform fine. Looks like outline is the only problematic one.

I agree that a Webkit bug may be a good idea. I think it makes sense to let you all file it, though let me know if I can be of any more assistance isolating or reproducing the problem.

[jclem]

@trueadm Just to clarify, I haven’t done any testing in the Lexical Playground itself.

What I have found that is extremely surprising is that setting outline: none on the editor itself vastly improves performance in Safari. I whittled your CodeSandbox down to what I had in mine and eventually found that removing that CSS rule caused yours to inherit the same performance.

To reproduce: Simply remove the outline: 0 rule from the .editor-input selector in your CodeSandbox, and then try editing a document with 500 empty lines. It’s a world of difference. I guess outlines are just really expensive to paint in Safari? Not sure.

As far as I’m concerned, this issue is solved for me, but I’ll let you close the issue out or not depending on whether you want to take any action here.