javascript - CSS by data-attribute will not refresh/repaint -
in html5/js application have view styles depending on data-attribute of elements:
like
<li data-level="0"></li> or
<li data-level="1"></li> css
li[data-level^="1"] { /* styles */ } this seems work fine everywhere on page reload.
but when data-attribute set programmatically via js, css properties rendered in relevant desktop browsers, not in mobile safari.
js part looks this:
this.$el.attr('data-level', this.model.getlevel()) any ideas on how force apply properties (refresh/repaint something) ?
i avoid using class attribute , different classes things more complex shown here...
ok, changing data attributes doesn't seem trigger redraw of element in browsers !?
changing class attribute does. kind of workaround, trick.
this.$el .attr('data-level', this.model.getlevel()) .addclass('force-repaint') .removeclass('force-repaint'); as seen here: changing data attribute in safari, screen not redraw new css style
Comments
Post a Comment