Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slow Performance in Safari

See original GitHub issue

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:





Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:14 (6 by maintainers)

github_iconTop GitHub Comments

jclemcommented, Jun 2, 2022

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.

jclemcommented, Jun 2, 2022

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Safari Running Slow on Mac? 8 Possible Causes and Fixes
Safari could be slow because you're using an outdated version of Safari. The cache might be overworked, or you might be facing network...
Read more >
Safari has become very slow, lagging and not loading pages
Empty Caches. You can either choose Safari menu > Clear History Or, if you do not want to remove History go to Safari...
Read more >
Safari Slow on iPhone and iPad? Here are 8 Solutions to Fix It
One reason Safari feels slow can be due to background tasks. Turning off automatic iOS updates and app updates might help. Secondly, disabling ......
Read more >
Impeccable Tips to Speed Up Slow Safari on Mac
Why is Safari Slow? · Poor Internet connection · Several opened tabs · Safari history · Caches & cookies · AutoFill form text...
Read more >
Why Is Safari So Slow? Top Fixes to Speed up Browsing!
Part 1. Why Is Safari So Slow on Mac and How to Fix It? · There are too much data and cache on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found