I problemi causati in jQuery dalla dichiarazione CSS display: none

La dichiarazione CSS display: none è la diretta responsabile di una serie di problemi correlati con i metodi di jQuery. In questo articolo vedremo i problemi più comuni.

Le proprietà CSS opacity, visibility e display sono molto diverse tra loro. Quando modificate la visibilità o l'opacità di un elemento, quest'ultimo è ancora presente nel layout del documento.

Ma quando impostate la proprietà display di un elemento su none, questo elemento viene interamente rimosso dal layout del documento. Ciò significa che l'elemento non ha più un suo layout.

Il primo problema riguarda le coordinate degli elementi con display: none: jQuery non è in grando di calcolarle. Quindi un primo rimedio è quello di salvare le coordinate dell'elemento prima di utilizzare un metodo che faccia uso di questa dichiarazione CSS:

var $element = $( '#test' );
var origLeftOffset = $element.position().left;
$element.data( 'left', origLeftOffset );
$element.fadeOut( 'slow' );

Se gli elementi sono nascosti dai CSS, possiamo usare il metodo .css():

var $element = $( '#test' );
var origLeftOffset = parseInt( $element.css( 'left' ) );

Sfortunatamente questa soluzione non funziona con gli elementi non posizionati. Ad esempio:

#test {
  width: 100px;
  height: 100px;
  margin: 20px;
  display: none;
}

Usando sia jQuery che JavaScript il risultato è identico:

var $element = $( '#test' );
var element = document.getElementById( 'test' );
console.log( $element.offset().top, $element.offset().left );
// 0 0
var rect = element.getBoundingClientRect();
console.log( rect.top, rect.right, rect.bottom, rect.left );
// 0 0 0 0

Ma se invece di display: none usiamo visibility: hidden, otteniamo 20 28 con jQuery e 20 128 120 28 con JavaScript.

Un altro problema lo abbiamo con le Google Maps create tramite le API di Google. Supponiamo di avere una mappa inizialmente nascosta con questi stili:

#map {
  width: 400px;
  height: 300px;
  margin: 20px 0;
  display: none;
}

Il seguente video mostra cosa accade quando proviamo ad usare gli effetti di jQuery sulla mappa.

Invece se la mappa è inizialmente visibile ed usiamo gli stessi effetti il problema non si presenta.