[Webkit-unassigned] [Bug 213344] New: Cross domain iFrame animation throttling doesn't respond to Touch events correctly

Thu Jun 18 10:14:44 PDT 2020

https://bugs.webkit.org/show_bug.cgi?id=213344

            Bug ID: 213344
           Summary: Cross domain iFrame animation throttling doesn't
                    respond to Touch events correctly
           Product: WebKit
           Version: Safari 13
          Hardware: Unspecified
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: dustin.kerstein at gmail.com
                CC: dino at apple.com

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>
    <!-- <iframe id="iframe" width="480px" height="480px" src="http://LOCALHOST: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?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200618/cb8c5e68/attachment.htm>