Vue.js Bug Demo for iOS 9.3 MutationObserver Issue

This repository documents a real-world bug that occurred when Vue.js 1.0.24 ran on certain Chinese browsers in iOS 9.3. The symptom was straightforward: Vue's data binding would break after specific user actions, causing displayed values to fall out of sync with the actual data. In the demo, a button showing a number wouldn't update correctly after scrolling the page rapidly and then clicking the button.

The root cause turned out to be a problem with how Vue handles asynchronous tasks on older iOS browsers. Vue relies on a browser feature called MutationObserver to efficiently batch updates to the page. On iOS 9.3, certain browsers (particularly QQ Browser, Alipay's in-app browser, and UC Browser) would freeze this observer during scrolling and touch interactions, causing Vue to miss update notifications. Strangely, Safari, Chrome, Firefox, and WeChat's browser didn't have this problem, and neither did iOS 9.2 or earlier. The common thread: the buggy browsers all used Apple's older UIWebView technology, while the working ones used the newer WKWebView.

This would be relevant for anyone building web apps used in China that need to support older iOS devices, particularly those running on third-party app browsers rather than Safari. Mobile developers targeting Chinese users would encounter this exact issue in production. The author traced the problem to iOS 9.3's internal changes to how the system handles touch and click events, which apparently interfered with MutationObserver callbacks.

The fix involved telling Vue to fall back to a simpler (but slower) method—setTimeout instead of MutationObserver—specifically for iOS 9.3 on UIWebView browsers. It's a workaround rather than a true solution, since the underlying browser bug was beyond Vue's control. The repository serves as documentation of the investigation process and the compromise fix that had to be implemented.