CSS by data-attribute will not refresh/repaint

Question

In a HTML5/JS application we have a view with some styles depending on the data-attribute of elements:

like

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

or

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

CSS

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

This seems to work just fine everywhere on page reload.

But when the data-attribute get set programmatically via JS, the CSS properties get rendered in all relevant desktop browsers, but not in mobile safari.

JS part looks like this:

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

Any ideas on how to force to apply those properties (refresh/repaint something) ?

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

Answer 1

ok, changing data attributes simply doesn't seem to trigger a redraw of the element in all browsers !?

Changing the class attribute however does. Kind of a workaround, but does the trick.

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

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