Using jQuery.html() to update an element in a jQuery Mobile App results in scrambled display

[dnavarrojr]

I have a web app running in iOS 10 on an iPad 2. Using jQuery 1.11.1 and jQuery Mobile 1.4.5.

This problem does not happen when using the Safari browser. It only happens with third party browsers using the WKWebView or UIWebView render engines.

When updating text in an element

$( element ).html( text );

The text displayed is scrambled if the updates occur any faster than 15 seconds apart. On a test page without jQuery Mobile, just jQuery, the problem does not occur. In Safari the problem does not occur, but in Kiosk Pro Lite it happens with either of the above named render engines. Also tried in two other Kiosk apps with the same result.

This is probably an issue with Apples render engines, but I thought I'd bring it up.

Here's a video showing how the text gets scrambled:

https://www.youtube.com/watch?v=N9PozcxvEx0

[dnavarrojr]

Tested with Chrome for iOS and problem does not happen. Not sure what engine Chrome uses.

[dnavarrojr]

After searching the web, I found a work-around...

$( element ).empty().html( text );

Emptying the element first appears to fix the render issue.

[apsdehal]

Can you create a jsbin for this, so it can be easily reproduced? And chrome uses chromium.