jQuery UI Resizable: problème de Ghosting

J’ai relevé un problème très étrange lié à l’événement jQuery UI Resizable, lorsque la propriété “ghost” a été définie.

Par défaut, lorsque je règle le sens du dimensionnement sur le sud et que je n’ai pas activé fantôme, le redimensionnement fonctionne comme prévu, exemple:

 Pull me at the bottom to resize me!!

Lorsque je redimensionne ce sud, la largeur est maintenue à 300px.

Cependant, lorsque “fantôme” est activé, le redimensionnement diminue la largeur de 2 pixels à chaque action glisser / relâcher / glisser / relâcher.

J’ai consulté le code de l’interface utilisateur de jQuery, mais je ne trouve aucune référence expliquant pourquoi cela se produit.

Quelqu’un d’autre a-t-il vu cela?

Cela se produit chaque fois que vous avez un helper personnalisé dans votre redimensionnable (bien que je ne sois pas tout à fait pourquoi …), fantôme est simplement un type spécifique d’assistant. Si vous regardez le code du widget redimensionnable, vous verrez ce bit dans la fonction _renderProxy :

  this.helper.addClass(this._helper).css({ width: this.element.outerWidth() - 1, height: this.element.outerHeight() - 1, position: "absolute", left: this.elementOffset.left + "px", top: this.elementOffset.top + "px", zIndex: ++o.zIndex //TODO: Don't modify option });

Je ne sais pas quel est le but de ces outerWidth - 1 , mais vous pouvez le contourner en développant le widget:

 $.widget("ui.resizable", $.ui.resizable, { _renderProxy: function() { this._super(); this.helper.css({ width: this.element.outerWidth(), height: this.element.outerHeight() }); } });

Avertissement : à utiliser avec prudence! Je montre simplement comment résoudre le problème. Je ne sais pas ce qui a poussé l’auteur initial à inclure ces -1 mais je suppose qu’il avait de bonnes raisons.

Voici une mise à jour sur le violon de @ ılǝ avec ceci: http://jsfiddle.net/py308nr7/