React-dnd: Problème avec Firefox perdant des événements

Créé le 5 avr. 2018 · 7Commentaires · Source: react-dnd/react-dnd

J'ai trouvé un bug assez méchant qui semble déclencher un problème peut-être dans Firefox lui-même. Je peux reproduire cette erreur même sur l'exemple du tutoriel d'échecs. Fondamentalement, vous pouvez entrer dans un état où Firefox ne semble pas envoyer d'événements de souris à l'exception du dragstart.

Reproduire

Cliquez sur une source de glissement et commencez à la faire glisser, relâchez la souris avant que l'aperçu n'apparaisse. Dans l'exemple du didacticiel, une fois que vous l'avez fait une fois, les cibles de dépôt resteront en surbrillance. Vous devez parfois le refaire immédiatement pour déclencher le bogue complet.

C'est beaucoup plus facile à accomplir sur les pages plus lentes où l'aperçu prend un certain temps à apparaître. J'ai une page qui est très lente, et je peux la reproduire en relâchant le clic parfois même une seconde après avoir commencé à glisser.

Symptômes

Une fois que vous avez déclenché le bogue, Firefox semble arrêter d'envoyer des événements de glisser autres que dragstart à presque tous les onglets. Parfois, je peux provoquer le problème sur une page avec une réaction, puis tous mes autres onglets commencent à présenter les mêmes symptômes.

Il n'y a que deux façons de vous sortir de cet état brisé. Tout d'abord, vous pouvez fermer et rouvrir le navigateur. Deuxièmement, vous pouvez lancer un glissement sur une page où react-dnd fonctionne toujours. Une fois que vous avez fait cela, la page qui a causé la coupure recevra un événement glisser-déposer. Alors:

L'onglet 1 voit un clickstart
L'onglet 1 ne voit pas plus d'événements que le clickstart
Ouvrez l'onglet 2 et commencez à faire glisser
L'onglet 1 voit un clic et fonctionne à nouveau

Voici une vidéo montrant ce comportement étrange à l'aide de deux onglets montrant https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html.

ReactDnDFirefoxBug.zip

Je suis sous macOS High Sierra 10.13.3 (17D102) avec Firefox 59.0.2 (64 bits). Cela semble se produire sur n'importe quelle version> = 57. J'ai reproduit l'erreur avec react-dnd 2.6.0 et 2.5.4.

Je serais heureux de vous aider avec tout test ou débogage pour résoudre ce problème ou proposer une solution de contournement si le problème est dans Firefox lui-même.

browser bug bug wontfix

Source

jsteel

👍10

Commentaire le plus utile

Ticket ouvert avec Mozilla ici: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel le 6 avr. 2018

👍3

Tous les 7 commentaires

J'ai trouvé un meilleur moyen de déclencher le bogue qui n'utilise même pas react-dnd.

Une fois que vous avez cassé la page, la seule façon que je peux trouver pour la réparer est de déplacer la pièce d'échecs sur l'exemple react-dnd, ou de redémarrer Firefox. Je ne sais pas exactement ce que fait l'exemple react-dnd pour le décoller, ou comment y remédier.

<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>

jsteel le 6 avr. 2018

Ticket ouvert avec Mozilla ici: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel le 6 avr. 2018

👍3

Je peux le confirmer :(

deepj le 10 avr. 2018

👍1

Confirmé

darthtrevino le 19 avr. 2018

👍1

Un correctif a été commis dans Firefox et devrait être publié avec Firefox 63 (version prévue le 23/10/2018)

renchap le 3 août 2018

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité n'a lieu. Merci pour vos contributions.

stale[bot] le 6 juil. 2019

Cela se produit encore pour moi sous Fedora 30 et Windows 10 (Firefox 69). J'ai également ajouté ces informations au ticket Firefox. Depuis le dernier commentaire sur le ticket avant le mien se lit:

Le problème ne se produit apparemment également que si le rafraîchissement est demandé "dans le fil principal".
Lorsque vous encapsulez le redessin dans requestAnimationFrame (), cela fonctionne comme prévu.

Pouvons-nous faire quelque chose pour contourner le bogue dans la bibliothèque?

Modifier le 19/09/2019:
Il semble y avoir eu une régression dans Firefox 69 réintroduisant ce bogue, j'ai déposé un nouveau ticket avec eux: https://bugzilla.mozilla.org/show_bug.cgi?id=1582401