React-dnd: Problem mit Firefox-Verlustereignissen
Ich habe einen ziemlich bösen Fehler gefunden, der ein Problem möglicherweise in Firefox selbst auslöst. Ich kann diesen Fehler sogar im Beispiel des Schach-Tutorials reproduzieren. Grundsätzlich können Sie in einen Zustand geraten, in dem Firefox anscheinend keine Mausereignisse außer Dragstart sendet.
Reproduzieren
Klicken Sie auf eine Ziehquelle und beginnen Sie mit dem Ziehen. Lassen Sie die Maus los, bevor die Vorschau angezeigt wird. Im Tutorial-Beispiel bleiben die Drop-Ziele hervorgehoben, nachdem Sie dies einmal getan haben. Manchmal müssen Sie es sofort erneut tun, um den vollständigen Fehler auszulösen.
Dies ist auf langsameren Seiten, auf denen es eine Weile dauert, bis die Vorschau angezeigt wird, viel einfacher. Ich habe eine Seite, die sehr langsam ist, und ich kann sie reproduzieren, indem ich den Klick manchmal sogar eine Sekunde nach dem Ziehen loslasse.
Symptome
Sobald Sie den Fehler ausgelöst haben, scheint Firefox keine anderen Drag-Ereignisse als Dragstart mehr an fast alle Registerkarten zu senden. Manchmal kann ich das Problem auf einer Seite verursachen, wenn ich darauf reagiere, und dann zeigen alle meine anderen Registerkarten die gleichen Symptome.
Es gibt nur zwei Möglichkeiten, um aus diesem zerbrochenen Zustand herauszukommen. Zunächst können Sie den Browser schließen und erneut öffnen. Zweitens können Sie ein Ziehen auf einer Seite initiieren, auf der react-dnd noch funktioniert. Sobald Sie dies getan haben, erhält die Seite, die die Unterbrechung verursacht hat, ein Dragend-Ereignis. Damit:
- Tab 1 sieht einen Klickstart
- In Registerkarte 1 werden nur Klickstartereignisse angezeigt
- Öffnen Sie Tab 2 und beginnen Sie mit dem Ziehen
- Tab 1 sieht ein Clickend und funktioniert jetzt wieder
Hier ist ein Video, das dieses seltsame Verhalten auf zwei Registerkarten zeigt, auf denen https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html angezeigt wird.
Ich bin auf macOS High Sierra 10.13.3 (17D102) mit Firefox 59.0.2 (64-Bit). Es scheint bei jeder Version> = 57 zu passieren. Ich habe den Fehler mit react-dnd 2.6.0 und 2.5.4 reproduziert.
Gerne helfe ich Ihnen beim Testen oder Debuggen, um dieses Problem zu beheben, oder um eine Problemumgehung zu finden, wenn das Problem in Firefox selbst auftritt.
jsteel
Alle 7 Kommentare
Ich habe einen besseren Weg gefunden, um den Fehler auszulösen, der nicht einmal react-dnd verwendet.
Sobald Sie die Seite beschädigt haben, kann ich sie nur beheben, indem Sie die Schachfigur im Beispiel "Reagieren" verschieben oder Firefox neu starten. Ich bin mir nicht sicher, was genau das React-Dnd-Beispiel tut, um es zu lösen, oder wie man eine Problemumgehung dafür macht.
<html>
<head>
</head>
<body>
<p>
Click and drag the draggable item for longer than 1 second to see it dragging.
Click, drag, and release within 1 second to cause the error.
</p>
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<style>
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
<script>
var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function( event ) {
console.log('drag')
}, false);
function sleep(ms){
var waitTimeInMilliseconds = new Date().getTime() + ms;
while(new Date().getTime() < waitTimeInMilliseconds ) true;
}
document.addEventListener("dragstart", function( event ) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = .5;
sleep(1000);
// You can use this approach instead of the sleep. The image is quite
// large so it's easy to release the mouse before the image is loaded
// var img = new Image();
// img.src = 'http://awakeningthegoddesswithin.net/wp/wp-content/uploads/2015/06/moon.jpg';
// event.dataTransfer.setDragImage(img, 10, 10);
}, false);
document.addEventListener("dragend", function( event ) {
console.log("dragend")
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
console.log("dragover")
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function( event ) {
console.log("dragenter")
// highlight potential drop target when the draggable element enters it
if ( event.target.className == "dropzone" ) {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function( event ) {
console.log("dragleave")
// reset background of potential drop target when the draggable element leaves it
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function( event ) {
console.log("drop")
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);
</script>
</body>
Ticket mit Mozilla hier geöffnet: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131
jsteel
am 6. Apr. 2018
Ich kann dies bestätigen :(
deepj
am 10. Apr. 2018
Bestätigt
darthtrevino
am 19. Apr. 2018
Ein Fix wurde für Firefox festgeschrieben und sollte mit Firefox 63 veröffentlicht werden (geplante Veröffentlichung am 23.10.2018).
renchap
am 3. Aug. 2018
Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.
![stale[bot] picture](https://avatars3.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
am 6. Juli 2019
Dies geschieht für mich sowohl unter Fedora 30 als auch unter Windows 10 (Firefox 69) immer noch. Ich habe diese Informationen auch dem Firefox-Ticket hinzugefügt. Seit dem letzten Kommentar zum Ticket vor meinem lautet:
Das Problem tritt anscheinend auch nur auf, wenn das Neuzeichnen "im Hauptthread" angefordert wird.
Wenn Sie die Neuzeichnung in requestAnimationFrame () einschließen, funktioniert dies wie erwartet.
Können wir irgendetwas tun, um den Fehler in der Bibliothek zu umgehen?
Bearbeiten 19.09.2019:
Es scheint eine Regression in Firefox 69 gegeben zu haben, die diesen Fehler wieder einführte. Ich habe ein neues Ticket bei ihnen eingereicht: https://bugzilla.mozilla.org/show_bug.cgi?id=1582401
saltenhub
am 18. Sept. 2019
Verwandte Themen
Okami92
·
3Kommentare
yaoyuande
·
3Kommentare
redochka
·
3Kommentare
bebbi
·
3Kommentare
vickyvxr
·
3Kommentare
Hilfreichster Kommentar
Ticket mit Mozilla hier geöffnet: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131