CSS by data-attribute will not refresh/repaint
css, custom-data-attribute, javascript, mobile-safari, repaint
Solution
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
Problem
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...