Open Radar

 
Summary:
In a particular structure of HTML/JS/CSS (as included in the example app), when a particular element is touched, the underlying WebContent process enters a seemingly infinite work cycle and pegs the CPU at 100%. This is observable with both an iPhone 7 running Mobile Safari and the iOS Simulator in 10.2. A small change to the HTML structure, i.e. changing an inner <div> tag to an <a> tag resolves the issue with seemingly no other changes anywhere else.

Steps to Reproduce:
I have hosted examples of a broken and working web application. It uses 3 javascript libraries, namely Angular/Angular-Route/Angular-UI-Router. I have distilled the example apps down to an absolute basic case.

Bad Example:
1. Visit http://bug.dmf.zone/bad
2. Tap the arrow
3. 2 lines should be logged to the JS console (via console.log)
4. Safari will now be locked up/unresponsive

Good Example:
1. Visit http://bug.dmf.zone/good
2. Tap the arrow
3. 2 lines should be logged to the JS console (via console.log)
4. You should be able to tap the arrow again and more events are logged, indicating that Safari is not locked up

I have included the source of these apps as an attachment. They just need a local web server. 

Expected Results:
Touch events should continue to be logged into the JS console 

Actual Results:
The Safari Web Content process starts consuming 100% of available CPU capacity and Mobile Safari needs to be killed

Version:
Tested using iOS 10.2 Simulator and iPhone 7 running 10.2.1 and issue is present

Tested on macOS (Version 10.12.3) with Safari (Version 10.0.3 (12602.4.8)) and issue was not present due to absence of touch events

Notes:


Configuration:
The only difference between the good and bad examples is in views/detail.html on line 8 and 12. Changing that tag from a <div> to an <a> tag, while affecting the styling, also mitigates the underlying issue. 

Additionally, it seems that any adjustment to the DOM tree manually via the inspector prior to the issue occurring also prevents the issue from occurring. 

I've also performed testing on previous iOS versions via the simulator and I believe the issue was introduced in 9.3:

8.4 (Simulator) - Okay
8.4.1 (iPhone 4s) - Okay
9.0 (Simulator iPhone 5s) - Okay
9.1 (Simulator iPhone 5s) - Okay
9.2 (Simulator iPhone 5s) - Okay
9.3 (Simulator iPhone 5s) - Issue Present
9.3 (Simulator iPhone 6s) - Issue Present
10.1.1 (iPhone 6s) - Issue Present
10.2.1 (iPhone 7) - Issue Present

Its also worth noting that I don't believe this problem is directly related to the javascript used in this project. Reason being is that while the javascript is on the scene when the issue occurs, when it does I'm unable to debug/breakpoint/pause using the Web Inspector debugger. Inserting 'debugger;' statements throughout the JS code makes no difference. Additionally, without changing the JS but rather changing a <div> to an <a> tag mitigating the issue tends to suggest the JS is not responsible.