search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.54k stars 3.7k forks source link

Chrome-only position ghosting bug on Windows when using display scaling #1576

Open kevin-j-morse opened 5 years ago

kevin-j-morse commented 5 years ago

Problem:

With two side by side sortables there is strange ghosting behaviour that happens only on Chrome when display scaling is set to something other than 100%. The jsbin was screencaptured in Chrome, Edge, and Firefox and the strange behaviour only happens in Chrome when sorting elements on the right most Sortable.

An issue was filed on the Chromium bug tracker but the issue was closed https://bugs.chromium.org/p/chromium/issues/detail?id=990572

chrome edge firefox

JSBin/JSFiddle demonstrating the problem:

https://jsbin.com/hagetoduze/edit?html,js,output

kevin-j-morse commented 5 years ago

Just tried in IE 11 for good measure. No issues there either!

kevin-j-morse commented 5 years ago

A little more info... I'm using Chrome 75.0.3770.100 (64-bit) on Windows 10...

forceFallback: true seems to fix the problem.

kevin-j-morse commented 5 years ago

After reading through the issue queue some more. It seems this might be a duplicate of #1518, #1497, #1450 although it isn't happening on the Grid example. One similarity is that my MWE is also using display: flex

Sorry for creating another duplicate. Hopefully I can help get this bug nailed. I'd really like to remove jQuery UI from my project but I'm still stuck with their implementation of sortable.

owen-m1 commented 5 years ago

@kevin-j-morse It must be the same issue, because I still cannot reproduce it in the JSBin. I have the exact same OS and Chrome version as you. Both Saucelabs and Browserstack do not show the bug in Chrome 75 with Windows 10 either. What is the the device you are testing this on? Also, does it occur if you downgrade the version? (try 1.9.0, 1.8.1, 1.7.0)

kevin-j-morse commented 5 years ago

I'm seeing this on the desktop that I built at home.

I will try the jsbin on my work computer although that's also Chrome and Windows 10.

Maybe it has something to do with hardware acceleration (this computer has an Nvidia GPU?) Or my other thought is that it could be a Chrome extension messing things up? I'm running LastPass and Adblock as well as a few different developer tools.

On Thu., Jul. 18, 2019, 05:03 owen-m1, notifications@github.com wrote:

@kevin-j-morse https://github.com/kevin-j-morse It must be the same issue, because I cannot reproduce it in the JSBin. I have the exact same OS and Chrome version as you. Both Saucelabs and Browserstack do not show the bug in Chrome 75 with Windows 10. What is the the device you are testing this on?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/SortableJS/Sortable/issues/1576?email_source=notifications&email_token=ABBVGEMVM4M2JMLJL3XNY5DQABL2XA5CNFSM4IEXJMKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2IIFCQ#issuecomment-512787082, or mute the thread https://github.com/notifications/unsubscribe-auth/ABBVGEPH7UEGDJK43SQIPMDQABL2XANCNFSM4IEXJMKA .

kevin-j-morse commented 5 years ago

Okay also seeing this on my machine at work. This one is running Chrome Version 75.0.3770.142 and has an AMD GPU. Completely different type of computer. Seeing the same behaviour.

However, my colleague sitting next to me did not see the same thing. Running the exact same Chrome version...

kevin-j-morse commented 5 years ago

Tried running Chrome in Guest mode which should disable all extensions and still seeing the same behaviour.

kevin-j-morse commented 5 years ago

@kevin-j-morse It must be the same issue, because I still cannot reproduce it in the JSBin. I have the exact same OS and Chrome version as you. Both Saucelabs and Browserstack do not show the bug in Chrome 75 with Windows 10 either. What is the the device you are testing this on? Also, does it occur if you downgrade the version? (try 1.9.0, 1.8.1, 1.7.0)

I will try downgrading versions tonight.

kevin-j-morse commented 5 years ago

This bug seems to exist at least as far back as 1.6.0

I tried 1.5.1 but it didn't work at all so there was likely some sort of syntax change at that point. I have now started looking into chrome://flags to see if there is some sort of a flag I can toggle that can prevent this bug.

kevin-j-morse commented 5 years ago

I went to chrome://flags and tried toggling dozens of settings with no effect.

Attached is the output of chrome://gpu on three machines I have access to right now.

The nvidia desktop and intel laptop are displaying this issue. The intel server is not.

chrome gpu intel laptop.txt chrome gpu nvidia desktop.txt chrome gpu intel server.txt

owen-m1 commented 5 years ago

@kevin-j-morse Any update on your end? I haven't had time to look really in depth into this but based on the information you have provided I still have no idea the cause or how I could reproduce it.

kevin-j-morse commented 5 years ago

@owen-m1 I am struggling to find any distinguishing factor between all the devices where this bug happens and all the devices where it does not happen. I can confirm it is happening on all my personal devices (only similarity would be they are both running Windows 10, some have GPU some do not) and then some of the devices at my work (none of the Windows Server but some of the desktops).

Is there any sort of trace or log file I could generate and send you? Would you be interested in remoting into a system that this is happening on?

kevin-j-morse commented 5 years ago

I created an issue on the Chromium bug tracker. Hopefully we get lucky and a Chromium developer experiences the same issue.

https://bugs.chromium.org/p/chromium/issues/detail?id=990572

owen-m1 commented 5 years ago

@kevin-j-morse If I could remote into it that would be very helpful. But it might take me up to a few hours to figure out the exact issue so if there was a device you could reserve for me to test that would be the easiest for me... are you using this library at your work or for a personal project?

kevin-j-morse commented 5 years ago

I am using it for a personal project. I just happen to have a lot of PC at work that I could use for testing.

A Chrome dev has seen the bug already so perhaps they will be able to reproduce it. If they can't I will try and go about setting up a way for you to access one of my PCs.

kevin-j-morse commented 5 years ago

@owen-m1 I think I have figured out how to get the bug to appear and disappear on my PC!

Changing the Windows scaling to something other than 100% makes it happen. Going back to 100% and it goes away.

windows scaling

kevin-j-morse commented 5 years ago

@owen-m1 it would be great if you could comment on the chromium issue right now. One developer thought it was a problem, another disagrees.

On Sat., Aug. 3, 2019, 12:18 owen-m1, notifications@github.com wrote:

@kevin-j-morse https://github.com/kevin-j-morse If I could remote into it that would be very helpful. But it might take me up to a few hours to figure out the exact issue so if there was a device you could reserve for me to test that would be the easiest for me... are you using this library at your work or for a personal project?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/SortableJS/Sortable/issues/1576?email_source=notifications&email_token=ABBVGELPTPELNPVOSKTHSWTQCXKZZA5CNFSM4IEXJMKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3PUG7I#issuecomment-517948285, or mute the thread https://github.com/notifications/unsubscribe-auth/ABBVGEM2HEY2F5ESXKZNCCTQCXKZZANCNFSM4IEXJMKA .

owen-m1 commented 5 years ago

I commented

kevin-j-morse commented 5 years ago

I am not sure what to do about the Chromium developer who seems to think this is an external problem? I am quite convinced it is a Chrome problem but he did not seem very interested...

owen-m1 commented 5 years ago

@kevin-j-morse I guess wait for his response.. I was only partially able to reproduce the issue when changing the scaling.. but it definitely seems to be an issue with Chrome or Windows

znebby commented 4 years ago

I am experiencing the same issue. It's super annoying. My scaling is set to 125%. I confirmed that 100% does not have the issue. Using latest Chrome 83. It's unfortunate that the Chrome team has not responded to the issue.

@kevin-j-morse Have you managed to solve this in any way?

kevin-j-morse commented 4 years ago

@znebby sadly I have not. Unfortunately this is a show stopper for me so I have been unable to switch over to using this library.

If you want to try again with the Chrome team I would be happy to lend some support... I am also wondering if the new Edge (now based on Chrome) will have the same issue. If so, maybe Microsoft would be more game to fixing it.

kevin-j-morse commented 3 years ago

This issue is now also present on Edge since it has switched to Chrome's rendering engine :'(

kevin-j-morse commented 3 years ago

Looks like the underlying issue has been found https://bugs.chromium.org/p/chromium/issues/detail?id=1125364