React-dnd: Masalah dengan acara kehilangan Firefox

Dibuat pada 5 Apr 2018  ·  7Komentar  ·  Sumber: react-dnd/react-dnd

Saya telah menemukan bug yang cukup buruk yang tampaknya menjadi masalah yang mungkin tersandung di Firefox itu sendiri. Saya dapat mereproduksi kesalahan ini bahkan pada contoh tutorial catur. Pada dasarnya, Anda bisa masuk ke keadaan di mana Firefox tampaknya tidak mengirim acara mouse apa pun kecuali dragstart.

Reproduksi

Klik pada sumber seret dan mulailah menyeretnya, lepaskan mouse sebelum pratinjau muncul. Dalam contoh tutorial, setelah Anda melakukannya sekali, target penurunan akan tetap disorot. Terkadang Anda harus segera melakukannya lagi untuk memicu bug penuh.

Ini jauh lebih mudah dilakukan pada halaman yang lebih lambat di mana pratinjau membutuhkan beberapa saat untuk muncul. Saya memiliki laman yang sangat lambat, dan saya dapat mereproduksinya dengan melepaskan klik kadang-kadang bahkan satu detik setelah itu mulai menyeret.

Gejala

Setelah Anda memicu bug tersebut, Firefox tampaknya berhenti mengirimkan peristiwa tarik selain dragstart ke hampir setiap tab. Kadang-kadang saya dapat menyebabkan masalah di satu halaman dengan bereaksi di atasnya, lalu semua tab saya yang lain mulai menunjukkan gejala yang sama.

Hanya ada dua cara untuk keluar dari kondisi rusak ini. Pertama, Anda dapat menutup dan membuka kembali browser. Kedua, Anda bisa memulai drag pada halaman di mana react-dnd masih berfungsi. Setelah Anda melakukan ini, halaman yang menyebabkan jeda akan menerima acara seret. Begitu:

  1. Tab 1 melihat clickstart
  2. Tab 1 tidak melihat lebih banyak acara selain clickstart
  3. Buka Tab 2 dan mulailah menyeret
  4. Tab 1 melihat ujung klik dan sekarang berfungsi kembali

Berikut adalah video yang menunjukkan perilaku aneh ini menggunakan dua tab yang menunjukkan https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html.

ReactDnDFirefoxBug.zip

Saya menggunakan macOS High Sierra 10.13.3 (17D102) dengan Firefox 59.0.2 (64-bit). Tampaknya ini terjadi pada versi mana pun> = 57. Saya telah mereproduksi kesalahan dengan react-dnd 2.6.0 dan 2.5.4.

Saya akan dengan senang hati membantu pengujian atau debugging untuk memperbaikinya, atau memberikan solusi jika masalahnya ada di Firefox itu sendiri.

browser bug bug wontfix

Komentar yang paling membantu

Tiket dibuka dengan Mozilla di sini: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

Semua 7 komentar

Saya telah menemukan cara yang lebih baik untuk memicu bug yang bahkan tidak menggunakan react-dnd.

Setelah Anda merusak halaman, satu-satunya cara yang dapat saya temukan untuk memperbaikinya adalah dengan memindahkan bidak catur pada contoh react-dnd, atau memulai ulang Firefox. Saya tidak yakin persis apa yang dilakukan contoh react-dnd untuk melepaskannya, atau bagaimana cara mengatasinya.

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

Tiket dibuka dengan Mozilla di sini: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

Saya dapat mengkonfirmasi ini :(

Dikonfirmasi

Perbaikan telah dilakukan pada Firefox dan harus dirilis dengan Firefox 63 (rilis yang direncanakan pada 2018-10-23)

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Ini masih terjadi pada saya di Fedora 30 dan Windows 10 (Firefox 69). Saya juga telah menambahkan informasi ini ke tiket Firefox. Sejak komentar terakhir di tiket sebelum saya berbunyi:

Masalah ini tampaknya juga terjadi hanya jika penggambaran ulang diminta "di utas utama".
Saat menggabungkan gambar ulang dalam requestAnimationFrame (), ini berfungsi seperti yang diharapkan.

Adakah yang bisa kami lakukan untuk mengatasi bug di perpustakaan?

Sunting 19/9/2019:
Tampaknya ada kemunduran di Firefox 69 yang memperkenalkan kembali bug ini, saya telah mengajukan tiket baru dengan mereka: https://bugzilla.mozilla.org/show_bug.cgi?id=1582401

Apakah halaman ini membantu?
0 / 5 - 0 peringkat