CSS on data attribute not updating / redrawing

Question

In an HTML5 / JS application, we have a view with some styles depending on the data-attribute element:

like

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

or

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

CSS

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

It seems to work fine on all page reload .

But when the data attribute is set programmatically via JS, the CSS properties are obtained in all relevant desktop browsers, but not in mobile safari.

The JS part is as follows:

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

Any ideas on how to enforce these properties (update / repaint something)?

I would like to avoid using the class attribute and different classes as things are more complicated than shown here ...

Answer 1

ok, changing data attributes just doesn’t cause the item to be redrawn in all browsers !?

However, changing the class attribute. Kind of a workaround, but does the trick.

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

As shown here: Changing the data attribute in Safari, but the screen does not redraw to the new CSS style