The content of the element will become blurred after dragging

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.

https://anseki.github.io/plain-draggable/

MIT License

773 stars 99 forks source link

The content of the element will become blurred after dragging #81

Closed meteorlin closed 3 years ago

meteorlin commented 3 years ago

Great project! In the process of using it, I found that when dragging a larger div, its content will become blurred. Is there any solution? Thanks in advance!

In the picture below, the blue part on the left is the normally displayed element, and the window-like element on the right is the drag element.

anseki commented 3 years ago

Hi @meteorlin, thank you for the comment. To reproduce that, could you show an example by using e.g. https://jsfiddle.net/ ?

meteorlin commented 3 years ago

Thanks for your quick reply! I developed the project under the framework of Vue3. I initialize the child component by creating a new component in the root Vue component and register it in plain-draggable. The following is an example of my implementation in codesandbox (example). Click the button click me to insert a plain to create a draggable element (the drag handle is the green part). You may need to move back and forth a few times to see that the text in the moved element is blurred.

anseki commented 3 years ago

I tried your example with Blink, Gecko and Trident, then it seems that the issue was not reproduced (in Trident, the example didn't work). Your GPU driver might have a problem. Or, it might be caused by web browser, version of the web browser, OS, version of the OS or GPU. Anyway, sorry that we can do nothing because the issue can't be reproduced.

meteorlin commented 3 years ago

Thank you again! I still don't know what went wrong, and it does not happen when I run it on other devices (including mobile phones). Now there is a situation where a button is rendered into two parts (half clear and half blurred)...

anseki commented 3 years ago

This is caused by your GPU driver maybe. The library uses translate CSS function that works with GPU. Then, it might be solved by adjusting "hardware acceleration" configration of your web browser, "font-smoothing", etc.

meteorlin commented 3 years ago

Hi @anseki, I found that after setting the "will-change" property to "unset!important", the "blurred" disappeared, but there was a slight lag, which seems acceptable at present. In addition, the "pixelated" mentioned in question #38 may be what I call "blurry".

anseki commented 3 years ago

Thank you for the information. Yes, as I said, this is caused by your GPU driver. The will-change makes it work with GPU. Then, it might be solved by adjusting "hardware acceleration" configuration of your web browser or your GPU driver.