JQuery Il setter CSS non funziona nel webkit quando si imposta la proprietà di conteggio delle colonne

Question

Ho un codice HTML ul che viene generato dinamicamente utilizzando JavaScript. Dopo averlo generato, ho impostato lo stile su detto ul utilizzando il metodo $('#id').css('property',value) di JQuery. Questo è ciò che il codice in questione si presenta come:

$('#actionSpace #datasetContent') 
    .css('-moz-column-count',this.content.length) 
    .css('-webkit-column-count',this.content.length) 
    .css('column-count',this.content.length) 
    .css('width',this.content.length*150 + 'px'); 

In sostanza, ho impostato 3 diversi column-count proprietà - una volta per css regolare, una volta per css nel dominio -moz, e una volta per css nel dominio -webkit, e poi ho anche impostato la proprietà width.

Questo codice funziona bene in Firefox, il css per l'elemento ul con un ID degli aggiornamenti datasetContent.

Tuttavia, quando eseguo questo nel webkit (Safari o Chrome), questo smette di funzionare. La cosa strana è che la proprietà width (l'ultima cosa che ho impostato in quella lunga riga di css sopra) è impostata correttamente, ma nessuna delle altre proprietà viene impostata. Se li cambio manualmente all'interno dell'ispettore Chrome, il sito si aggiorna correttamente. Tuttavia, ovviamente, non posso ragionevolmente pretendere che gli utenti del mio sito armino manualmente con CSS sulla mia pagina per renderlo bello :)

Qualcuno ha idea di cosa potrebbe causare questo problema?

UPDATE Ho provato il passaggio del ul ad un div, e che non ha fatto una differenza a tutti. Il problema riguarda in particolare solo JQuery CSS & le proprietà di conteggio delle colonne. Forse questo è qualcosa da portare direttamente alla gente di JQuery? Aspetterò e vedrò se ci sono delle risposte qui, e se no, troverò il canale appropriato lì.

Answer 1

Avete considerato di applicare il CSS utilizzando un singolo .css({ // array }) anziché concatenare .css(property, value)? Come hai scritto sopra, avrebbe senso che i tuoi stili funzionassero in Firefox perché -moz-column-count è stato applicato correttamente, ma non sono sicuro che i due usi consecutivi di .css() possano essere concatenati in questo modo. Questo non genera un errore in Chrome Dev Tools?

penserei

$('#actionSpace #datasetContent').css({ 
    '-moz-column-count': this.content.length, 
    '-webkit-column-count': this.content.length, 
    'column-count': this.content.length, 
    'width': this.content.length * 150 + 'px' 
}); 

potrebbe funzionare meglio.