213344 2020-06-18 10:14:44 -0700 Cross domain <iframe> animation throttling doesn't respond to touch events correctly 2026-01-12 09:03:30 -0800 1 1 1 Unclassified WebKit Animations Safari 13 Unspecified All NEW https://bugs.webkit.org/show_bug.cgi?id=170534 InRadar P2 Normal --- 1 dustin.kerstein webkit-unassigned cdumez dino graouts jason simon.fraser webkit-bug-importer oldest_to_newest 1663910 0 dustin.kerstein 2020-06-18 10:14:44 -0700 In this changeset - https://trac.webkit.org/changeset/215070/webkit - A throttling mechanism was introduced to prevent iFrame Ads from unnecessarily consuming battery when the user wasn't interacting with them. It defaults a cross-domain iFrame's requestAnimationFrame frequency to 30fps, until the user "interacts" with the iFrame. This appears to be working correctly with mouse events. However, touch events aren't working the same way. Ie. If you quickly tap on the iFrame, it will start rendering at 60fps. However, if you swipe/drag/pan (as in for a 360 photo for example) it won't mark this as "interacted" and stays at 30fps. Here is an easy example to replicate with. Parent Frame ------------ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; background-color: #000000; overflow: hidden:; } #text { width: 100%; height: 100%; position: fixed; font-size: 5vw; color: white; text-align: center; top: 50%; } #countText { position: fixed; bottom: 1em; right: 1em; color: white; } </style> </head> <body> <div id="text"> Swiping doesn't trigger "interaction". Only an actual touch "tap". </div> <div id="countText"> </div> <script> var count = 0; window.requestAnimationFrame(animate); function animate() { window.requestAnimationFrame(animate); count++; document.getElementById("countText").innerHTML = count; } (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})() </script> </body> </html> Child Frame ----------- <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; background-color: #000000; overflow: hidden; } </style> </head> <body> <iframe id="iframe" width="480px" height="480px" src="http://IPADDRESS:PORT/webkitchild.html"></iframe>  </html> In order to replicate, you need to ensure that the URL of the Parent frame is not the same as the Child frame (ie. it has to be Cross Domain). Using the local server's IP address and Localhost should allow you to replicate on a single device without having to deal with DNS. Maybe this is as designed, but I felt that those types of touch events (swiping, dragging, zooming, etc.) should be considered a valid interaction to bypass the throttling code. Does that sound reasonable? 1663911 1 dustin.kerstein 2020-06-18 10:15:52 -0700 Apologies. The "Parent Frame" and "Child Frame" are labelled backwards in my previous post. 1664646 2 webkit-bug-importer 2020-06-19 17:29:43 -0700 <rdar://problem/64550446> 1676799 3 graouts 2020-07-31 06:28:16 -0700 Actually, just loading the files locally shows a cap of 30fps for the frame in the iOS Simulator. 1676800 4 405684 graouts 2020-07-31 06:30:42 -0700 Created attachment 405684 Test Attached the sample from the bug description as a ZIP archive, opening the 213344-parent.html shows the issue where the stats are capped at 30fps. 1676801 5 graouts 2020-07-31 06:31:32 -0700 Cc'ing Simon, who wrote the patch in question (r215070). 1676862 6 graouts 2020-07-31 10:20:33 -0700 If I add a "pointerup" event listener in the child document, the 30fps throttle is released if I tap in the document. However, if I do a different kind of gesture which does not yield a simulated "click", the 30fps remains in place. 405684 2020-07-31 06:30:42 -0700 2020-07-31 06:30:42 -0700 Test 213344.zip application/zip 2005 graouts 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 lAEAACsGAAAAAA==