Signature_pad: La signature ne fonctionne pas Google Chrome, appareils mobiles (largeur >= 1080)

Créé le 18 mars 2019 · 7Commentaires · Source: szimek/signature_pad

Salut,

Tout d'abord merci pour votre travail.

Deuxièmement, j'ai un problème avec certains appareils mobiles _(smartphones et tablettes)_ de largeur supérieure ou égale à 1080 pixels _(comme HTC M9 Plus, Moto g (6) et Moto g5 Plus, Samsung SM-T385M)_ . Dans ces appareils, la signature ne fonctionne pas, lorsque j'essaie de signer, la page fait un défilement _(vers le haut ou vers le bas)_ et ne dessine qu'un point dans le canevas (regardez l'image) . Le problème ne se produit que dans Google Chrome, dans Firefox fonctionne bien _(avec une ou plusieurs signatures)_. Dans d'autres cas avec plus d'une signature, seule la première signature fonctionne et les autres ne fonctionnent pas -Google Chrome-.

Signature-pad Error

En regardant la console du navigateur, j'ai trouvé cette erreur :
[Intervention] Ignored attempt to cancel a touch event with cancelable = false, for example because scrolling is in progress and cannot be interrupted signature-pad.js:63

Dans cette ligne :
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched) { event.preventDefault(); self._strokeEnd(event); } };

Je l'ai changé en :
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched && event.cancelable) { event.preventDefault(); self._strokeEnd(event); } };

L'erreur dans la console a cessé d'apparaître, mais la signature ne fonctionne pas encore. J'ai essayé avec la version 2.3.0 et ne fonctionne pas non plus.

Peut-être avez-vous une idée à ce sujet?. Merci.

Source

cristhianDt

Commentaire le plus utile

Salut,

J'ai eu ce même problème, je pense l'avoir résolu en implémentant ce qui suit dans une fonction de chargement et de redimensionnement de la fenêtre (j'utilise également jQuery):

$('canvas.sig_canvas').each(function(){
  var id = $(this).attr('id'); //Get the ID of signature
  var width = $(this).closest('.sig_container').width(); //Get the width of the signature container
  sig_pads[id].off(); //Unbind all events on signature pad (I have an array of them)

  if(!$(this).data('prev_width') || Math.abs(width - $(this).data('prev_width')) > 30){ //Resize threshold 30px, only resize if previous width has changed by 30 pxs
    var ctx = $(this)[0].getContext('2d'); //Get context
    $(this).attr('width', width); //Set canvas width
    ctx.canvas.width  = width; //Set context width
    $(this).data('prev_width', width); //Update prev_width for threshold
  }
  sig_pads[id].on(); //Rebind all signature events
});

Je ne sais pas s'il s'agissait d'une déliaison et d'une reliure ou s'il s'agissait de définir une largeur de toile ainsi qu'une largeur de contexte qui semble l'avoir corrigée.

J'espère que cela vous aide.

Steeveuk le 26 avr. 2019

👍3

Tous les 7 commentaires

Je n'ai aucune idée de pourquoi cela pourrait arriver. Pourriez-vous ajouter un écouteur pour l'événement scroll et voir si le message d'erreur est correct, c'est-à-dire qu'il y a "défilement en cours" ?

D'AILLEURS. Pourriez-vous organiser une démo quelque part? J'ai une tablette Android, qui a probablement une résolution supérieure à 1080.

szimek le 18 mars 2019

Désolé pour le retard.

Oui je peux.

Laissez-moi voir si je peux mettre en place une démo pour vous.

cristhianDt le 20 mars 2019

@szimek ,

Codepen :

Éditeur : https://codepen.io/cristhiandt/pen/bZmBQx?editors=1111
Testez dans votre tablette : https://codepen.io/cristhiandt/full/bZmBQx

J'ai ajouté un écouteur pour l'événement scroll , "en faisant défiler" la console du navigateur.

cristhianDt le 20 mars 2019

@szimek

cristhianDt le 26 mars 2019

Salut,

As-tu pu le vérifier ? @szimek :C

cristhianDt le 28 mars 2019

Salut,

J'ai eu ce même problème, je pense l'avoir résolu en implémentant ce qui suit dans une fonction de chargement et de redimensionnement de la fenêtre (j'utilise également jQuery):

$('canvas.sig_canvas').each(function(){
  var id = $(this).attr('id'); //Get the ID of signature
  var width = $(this).closest('.sig_container').width(); //Get the width of the signature container
  sig_pads[id].off(); //Unbind all events on signature pad (I have an array of them)

  if(!$(this).data('prev_width') || Math.abs(width - $(this).data('prev_width')) > 30){ //Resize threshold 30px, only resize if previous width has changed by 30 pxs
    var ctx = $(this)[0].getContext('2d'); //Get context
    $(this).attr('width', width); //Set canvas width
    ctx.canvas.width  = width; //Set context width
    $(this).data('prev_width', width); //Update prev_width for threshold
  }
  sig_pads[id].on(); //Rebind all signature events
});

Je ne sais pas s'il s'agissait d'une déliaison et d'une reliure ou s'il s'agissait de définir une largeur de toile ainsi qu'une largeur de contexte qui semble l'avoir corrigée.

J'espère que cela vous aide.

Steeveuk le 26 avr. 2019

👍3

Selon les choses de @Steeveuk , utilisez simplement SignaturePadInstance.off () et réactivez par SignaturePadInstance.on ()