Sortable: Google Chrome - Performance Crash during sorting

[renebrain]

Hi guys,

i have an issue only regarding the chromium engine. I have to post you this issue verbally, because i wasn't able to reproduce this issue, except only in our project, which i can't post here. We are using the sortable plugin with multiple connected sortables and it works great. Sorting between them is really smooth and no issues on any of our browsers, except chrome. In Chrome when you start picking up the sortable item, the entire sortable starts almost freezing. The entire performance of the app goes down and it looks like it is getting stuck. This problem gets a little bit better, when we remove the transitions, but it still slows down to a painful pace. These problems happen with the native HTML5 Sorting. When we revert back to the forceFallback, it gets again better on chrome but still does not vanish. Especially when we use devices with less CPU Power the problem gets more and more noticable. But only on Chrome. On all other browsers like, Firefox, IE, Edge, Safari, even all mobile Browsers it works with no issues whatsover even with those mentioned slower devices.

Does any Developer maybe know why Chromium is behaving this way? Any ideas, what we can do about it? The Sortable items are div's which contain some more elements inside of it. Is it happening because, the objects might getting to complex for chrome at this Point?

Thank you,
i am looking forward to your help.

[lukepolo]

I am able to reproduce : http://jsbin.com/duwedexezi/1/edit?html,js,output

Just start adding things into the editor, then drag back and forth till chrome crashes

[Emeroj]

I'm having the very same issue with my sortable js lists. This issue has only emerged in the last few months for us, so something has recently changed in Chrome; SortableJs was working on Chrome just fine before that.

It only happens on Chrome (Firefox, Safari, Edge all work perfectly).

When a user starts to drag the item, the browser freezes (almost as if it is stuck in a loop), the browser and console errors are unhelpful:

• Chrome error "Aw Snap! Something went wrong when displaying this webpage"
• Console error "DevTools was disconnected from the page. Once page is reloaded, DevTools will automatically reconnect."

Opening Chrome with the error logger (using Terminal: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1 ) shows an error that I think causes this issue:

• Example error: "[63922:36355:0608/213622.828480:ERROR:channel.cc(592)] Invalid message size: 689212056"
• What this error means I am not entirely sure, however:
  
  
  
  • The end number ("689212056" in this example) is unique according to the sortable 'item'; replicating the error over and over again moving multiple items multiple times each, each item maintains the same number. It seems to be an identifier for the Sortable item.
    
    
    
    
    
    • The starting numbers "63922:...:0608" don't change.
    
    
    
    • The next numbers seem to be time related as they creep up each time the error emerges.
    
    
    
    • the 'channel.cc(592)' doesn't change.
    
    
    
  
  

I've tried logging console messages all through the Sortable.js file to try to see where it's getting caught/failing, but no luck yet diagnosing it.

I'm stuck now as I'm not sure how to diagnose this issue further....

We are using Sortable within a React application with Redux, Semantic UI is the css library. Sortable has been a breeze to set up and a great library with no issues until this one!

Can anybody help? Thanks!

[Emeroj]

Agree with lukepolo, he seems to have replicated the issue with https://github.com/RubaXa/Sortable/issues/1101

Using Chrome with the error logger on lukepolo's jsbin code produces the same error format that we are getting and that I have described above:
Example: "[65302:35843:0609/072713.697289:ERROR:channel.cc(592)] Invalid message size: 424689216"

(To open chrome with the error logger, use Terminal: "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1")

[lukepolo]

@Emeroj do you know what version you stated above that worked better? I dont mind going back to a prev version if thats the case

[Emeroj]

@lukepolo do you mean the version of Chrome or the version of Sortable?

[lukepolo]

version of sortable , but im guessing you were talking about chrome it self now that i re-read it

[Emeroj]

I'm pretty keen to get this one solved because this is a great library, and because I know it worked before. If you happen upon any other clues @lukepolo @renebrain during your coding, let me know by posting here, and I'll do the same.

[longprao]

I'm having this same problem when trying to drag a wysiwyg editor (Quill) like #1101 . It crashes every time I click on the handler to drag, so I have to make a workaround: hide the editor before dragging.

But the bad thing is there is no "beforeDrag" event (please add this?), so the "start" event is not enough, it still crashes anyway.

So the final workaround is to show a div for the wysiwyg area (hide the editor), that way I'm able to drag it, and on click on the div, hide the div and show the editor to edit the content with wysiwyg.

[renebrain]

Does anyone found the issue? We still cannot figure out why this is happening.

[renebrain]

Update: Latest Version of the Sortable is now fine with the js. Fallback on Chrome and all other Browsers (IE, Edge, FF, Safari, Mobile Chrome etc.)

The only issue is with Native sorting in Chrome which bugs out really hard and on Firefox on Linux the placeholder looks all over the place with native api

[Ankit-Dave]

Facing same issue as @longprao while using Quill Editor inside Sortable component.

[guateandrew]

Also facing the same issue as @longprao while using Quill in an

item. Was working fine until a couple of weeks ago.