I have a <div>
, that can be dragged using jquery draggable. This action leaves traces in Safari, but works in other browsers. Found similar (old) issues in Chrome regarding repaint, proposing solutions to use outline:1px solid transparent
but hat does not help here.
This question is also asked on stackoverflow but no answer so far: https://stackoverflow.com/questions/53208588/safari-jquery-dragging-with-filter-drop-shadow-leaves-traces
You can see a demo here (open it in Safari): https://jsfiddle.net/qzLjcagt/
$(function() { $("#draggableItem").draggable(); });
#draggableItem { width: 130px; position: relative; top: 30px; left: 30px; padding: 20px; text-align: center; font-family: sans-serif; background-color: #EEEEEE; filter: drop-shadow(rgb(100, 100, 100) 0px 0px 14px); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="draggableItem"> Drag this box </div>