Redraw jQuery Mobile button icons in iOS Safari

Redraw jQuery Mobile button icons in iOS Safari

I'm only having this problem in iOS Safari and not other webkit browsers
(such as Chrome). Occasionally, when I trigger a change on a .ui-radio or
.ui-checkbox input, the element does not get redrawn so you cannot tell
that your change has taken effect. Any other operation (scrolling,
clicking another button, or even touching the screen) will suddenly force
the redraw necessary to make the updated element appear. It seems like
jQuery mobile removes and adds these elements when changing how they look.
I've seen several explanations of what I believe is this problem as well
as possible solutions:
http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/
http://mir.aculo.us/2009/01/11/little-javascript-hints-episode-3-force-redraw/
How can I force WebKit to redraw/repaint to propagate style changes?
My current solution is something like:
$(".actual-input").on("change", function () {
setTimeout(function () {
var elem = $(this).next("label").find(".ui-icon").get(0),
dsp = elem.style.display,
txt = document.createTextNode(' ');
elem.appendChild(txt);
elem.style.display = "none";
setTimeout(function () {
elem.style.display = dsp;
txt.parentNode.removeChild(txt);
}, 200);
}.bind(this), 200);
});
The initial setTimeout is because the updated element seems to get
appended after the change event completes, so I can't find another way to
capture the element I want to redraw. With the above I can visibly see the
element flicker (and if I remove display = dsp, the element will not
reappear), however there are still times where nothing appears to redraw
(even if I don't display the element again). There doesn't seem to be any
consistency about it either.