title: WKWebView crashes in acceleratedAnimationDidStart
body: <p>I'm having a crash occur on a client's app and other than a lot at the <code>WTFCrash</code>, I'm not getting much use out of the stack trace.</p>
  
  <p>I am using a <code>WKWebView</code> instance to show a web page that has some CSS based animations and a video. The issues occurs on iOS 8 and 9 over a wide variety of devices (iPhone 5c to a 6s and a similar range of iPads).</p>
  
  <p>The <code>WKWebView</code> runs in its own process, not the application's. When the crash occurs a white layer is left behind that covers the main application, rendering it inaccessible even thought its process has not been affected.</p>
  
  <p>Looking at the device logs I find crashes from the <code>com.apple.WebKit.WebContent</code> process and they all have the exact same log for the crashed thread.</p>
  
  <pre><code>Thread 0 name:  Dispatch queue: com.apple.main-thread
  Thread 0 Crashed:
  0   JavaScriptCore                  0x0000000184c9f22c WTFCrash + 72
  1   JavaScriptCore                  0x0000000184c9f224 WTFCrash + 64
  2   WebKit                          0x0000000188ecd850 WebKit::RemoteLayerTreeDrawingArea::acceleratedAnimationDidStart(unsigned long long, WTF::String const&amp;, double) + 0
  3   WebCore                         0x0000000184f2e70c WebCore::ThreadTimers::sharedTimerFiredInternal() + 148
  4   WebCore                         0x0000000184f2e64c WebCore::timerFired(__CFRunLoopTimer*, void*) + 36
  5   CoreFoundation                  0x000000018107d81c __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__ + 28
  6   CoreFoundation                  0x000000018107d4c0 __CFRunLoopDoTimer + 884
  7   CoreFoundation                  0x000000018107abd4 __CFRunLoopRun + 1520
  8   CoreFoundation                  0x0000000180fa4d10 CFRunLoopRunSpecific + 384
  9   Foundation                      0x00000001819b4d8c -[NSRunLoop(NSRunLoop) runMode:beforeDate:] + 308
  10  Foundation                      0x0000000181a09ff8 -[NSRunLoop(NSRunLoop) run] + 88
  11  libxpc.dylib                    0x0000000180d68cf8 _xpc_objc_main + 660
  12  libxpc.dylib                    0x0000000180d6aa2c xpc_main + 200
  13  com.apple.WebKit.WebContent     0x0000000100057924 0x100054000 + 14628
  14  libdyld.dylib                   0x0000000180b428b8 start + 4
  </code></pre>
  
  <p>Here is some sample html/css that we use to reproduce the issue.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        var initialWidth = 100;
          window.addEventListener('load', function() {
            var div = document.getElementById('mytest');
            div.className = '';
            setInterval(function() {
              initialWidth += 10;
              if (initialWidth &gt; 1000) {
                initialWidth = 1;
              }
              div.style.height = initialWidth + 'px';
            }, 40);
          }, false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        body {
            background-color: #4cb9e4;
          }
          
          div#mytest {
            position: absolute;
            top: 0;
            width: 100%;
            height: 5000px;
            background-color: rgba(0, 0, 0, 0.7);
            text-align: center;
            overflow-y: hidden;
            -webkit-transition-property: height;
            -moz-transition-property: height;
            transition-property: height;
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
            transition-duration: 0.5s;
            -webkit-transition-timing-function: ease;
            -moz-transition-timing-function: ease;
            transition-timing-function: ease;
          }
          
          div#mytest.hidden {
            height: 0;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;body&gt;
        &lt;div class="hidden" id="mytest"&gt;
          This is sample test
        &lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does this look familiar to anybody? Is there something I should tell the web engineer to change with regards to the animation?</p>