I'm having a crash occur on a client's app and other than a lot at the WTFCrash
, I'm not getting much use out of the stack trace.
I am using a WKWebView
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).
The WKWebView
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.
Looking at the device logs I find crashes from the com.apple.WebKit.WebContent
process and they all have the exact same log for the crashed thread.
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&, 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
Here is some sample html/css that we use to reproduce the issue.
var initialWidth = 100;
window.addEventListener('load', function() {
var div = document.getElementById('mytest');
div.className = '';
setInterval(function() {
initialWidth += 10;
if (initialWidth > 1000) {
initialWidth = 1;
}
div.style.height = initialWidth + 'px';
}, 40);
}, false);
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;
}
<body>
<div class="hidden" id="mytest">
This is sample test
</div>
</body>
Does this look familiar to anybody? Is there something I should tell the web engineer to change with regards to the animation?