CSS da dati-attributo non verrà aggiornata/ridipingere

Question

In un'applicazione HTML5/JS abbiamo una visione con alcuni stili a seconda della data-attribute di elementi:

come

<li data-level="0"></li> 

o

<li data-level="1"></li> 

CSS

li[data-level^="1"] { 
    /* some styles */ 
} 

Questo sembra funzionare bene ovunque su page reload.

Ma quando l'attributo dati viene impostato a livello di programmazione tramite JS, le proprietà CSS vengono visualizzate in tutti i browser desktop pertinenti, ma non in Safari mobile.

JS parte assomiglia a questo:

this.$el.attr('data-level', this.model.getLevel()) 

Tutte le idee su come forzare applicare tali proprietà (aggiornamento/ridipingere qualcosa)?

vorrei evitare di utilizzare l'attributo class e diverse classi come le cose sono più complesse di quanto mostrato qui ...

Answer 1

ok, modifica di dati attributi semplicemente non sembra innescare un ridisegno dell'elemento in tutte le browser!?

La modifica dell'attributo class tuttavia. Una specie di soluzione alternativa, ma fa il trucco.

this.$el 
     .attr('data-level', this.model.getLevel()) 
     .addClass('force-repaint') 
     .removeClass('force-repaint'); 

Come si vede qui: Changing a data attribute in Safari, but the screen does not redraw to new CSS style