<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - WebGL canvas resumes at incorrect size/scale"
href="https://bugs.webkit.org/show_bug.cgi?id=154819">154819</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>WebGL canvas resumes at incorrect size/scale
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.2
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Canvas
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>ashley@scirra.com
</td>
</tr>
<tr>
<th>CC</th>
<td>dino@apple.com
</td>
</tr></table>
<p>
<div>
<pre>URL: <a href="http://www.scirra.com/labs/bugs/iosc2bug/">http://www.scirra.com/labs/bugs/iosc2bug/</a>
Steps to reproduce:
1. Visit the URL and observe the content running in Safari
2. Press the device power button to put it to sleep
3. Wake it up again and unlock it
4. Observe the content running in Safari again
Observed result:
The canvas (WebGL rendered) restores at a strange size. It appears the canvas has become much larger, and inside the Safari viewport only the top-left area of the canvas is visible. The content is however still running.
Expected result:
Canvas to resume at same size it was before.
We are developers of the widely-used HTML5 game engine Construct 2. This bug affects all Construct 2 content. We have found a workaround: we have a setSize() method which is called in the resize event. If we ignore resize events and simply poll window.innerWidth and window.innerHeight every requestAnimationFrame, and call the same setSize() method when this polling notices them changing, it appears to work. You can see this approach used here: <a href="http://www.scirra.com/labs/bugs/iosc2bugworkaround/">http://www.scirra.com/labs/bugs/iosc2bugworkaround/</a>
We will likely ship this workaround shortly, but this does not fix all existing Construct 2 content on the web.
I've tried to produce a more minimal test case. I'm afraid I haven't been able to do this, but along the way filed <a class="bz_bug_link
bz_status_NEW "
title="NEW - Viewport changes after refresh"
href="show_bug.cgi?id=154815">bug 154815</a> and <a class="bz_bug_link
bz_status_NEW "
title="NEW - Spurious resize events fired when resuming device"
href="show_bug.cgi?id=154816">bug 154816</a> which may be related; in particular <a class="bz_bug_link
bz_status_NEW "
title="NEW - Spurious resize events fired when resuming device"
href="show_bug.cgi?id=154816">bug 154816</a> involves firing incorrect resize events when resuming. I speculate that trying to resize the WebGL canvas in this incorrectly-fired resize event causes Safari to get confused about how to display it.
Not all devices are affected - of the devices I have access to:
iPad Pro: affected
iPad Air 2: affected
iPad 3: not affected
iPad 2: not affected
iPhone 4S: not affected
(Chrome for Android does not appear to be affected at all)
This is the same list of affected devices as in <a class="bz_bug_link
bz_status_NEW "
title="NEW - Spurious resize events fired when resuming device"
href="show_bug.cgi?id=154816">bug 154816</a>. However I feel I should point out I believe this is a different problem to that bug. Firing incorrect resize events is one problem, but even in this case the last event fired had the right size, and this means means our engine should only temporarily set the wrong size, then set the right size before a frame is displayed. This should work fine, but the issue with *this* bug is it appears to corrupt the canvas size even though it should work in the face of a spurious resize event.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>