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