<p dir="auto">I'm seeing an issue in Chrome 58.0.3029.83 on Android 7.0.0 where the visible viewport is getting clipped.</p>
<p dir="auto">Here's: <a href="https://threejs.org/examples/#webgl_animation_cloth" rel="nofollow">https://threejs.org/examples/#webgl_animation_cloth</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1334393/26452523/29608c08-4158-11e7-9a33-ba604a2d5d45.png"><img src="https://cloud.githubusercontent.com/assets/1334393/26452523/29608c08-4158-11e7-9a33-ba604a2d5d45.png" alt="screenshot_20170525-132558" style="max-width: 100%;"></a></p>
<p dir="auto">And <a href="https://threejs.org/examples/#webgl_camera" rel="nofollow">https://threejs.org/examples/#webgl_camera</a>:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1334393/26452565/488e4002-4158-11e7-95cf-f9955534b166.png"><img src="https://cloud.githubusercontent.com/assets/1334393/26452565/488e4002-4158-11e7-95cf-f9955534b166.png" alt="screenshot_20170525-132547" style="max-width: 100%;"></a></p>
<p dir="auto">My own application is also exhibiting this problem:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1334393/26452594/6abf63f4-4158-11e7-9c4a-a85986895388.png"><img src="https://cloud.githubusercontent.com/assets/1334393/26452594/6abf63f4-4158-11e7-9c4a-a85986895388.png" alt="screenshot_20170525-132615" style="max-width: 100%;"></a></p>
<p dir="auto">Some other examples are fine however:</p>
<p dir="auto"><a href="https://threejs.org/examples/#webgl_clipping" rel="nofollow">https://threejs.org/examples/#webgl_clipping</a><br>
<a href="https://threejs.org/examples/#webgl_loader_obj" rel="nofollow">https://threejs.org/examples/#webgl_loader_obj</a></p>
<p dir="auto">Unable to discern the difference between these cases...</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r85</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<p dir="auto">Nexus 6 phone</p>
<p dir="auto">Hey Three.js team,<br>
I found this weird bug that I thought you might find interesting.</p>
<p dir="auto">When I attempt the cloth animation three.js example (<a href="https://threejs.org/examples/#webgl_animation_cloth" rel="nofollow">https://threejs.org/examples/#webgl_animation_cloth</a>) on this tablet in Chrome, it only shows a small part of the rendered canvas.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3382216/26263123/5c9cb662-3ca5-11e7-8783-5eea55eadecc.png"><img src="https://cloud.githubusercontent.com/assets/3382216/26263123/5c9cb662-3ca5-11e7-8783-5eea55eadecc.png" alt="screenshot_20170519-150642" style="max-width: 100%;"></a><br>
(What it looks like on device)</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3382216/26263099/4541fe5a-3ca5-11e7-94e7-df0949b342c5.png"><img src="https://cloud.githubusercontent.com/assets/3382216/26263099/4541fe5a-3ca5-11e7-94e7-df0949b342c5.png" alt="image" style="max-width: 100%;"></a><br>
(What it looks like normally)</p>
<p dir="auto">I debugged this a little bit. When setSize is usually called, it edits a _canvas variable, which usually adjusts the screen immediately after being set. However, in Chrome on this device this does not happen. To make a weird case even weirder, this example actually works on mobile Firefox on the same device.</p>
<p dir="auto">Is this something that can be fixed from inside three.js, or is this something to developers of WebGL have to address?</p>
<p dir="auto">Thanks so much!</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r85</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Android 7</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<p dir="auto">Hardware requirements for the device are right here: <a href="https://www.cnet.com/products/sony-xperia-z4-tablet-sgp771-tablet-android-6-0-marshmallow-32-gb-10-1-3g-4g/specs/" rel="nofollow">https://www.cnet.com/products/sony-xperia-z4-tablet-sgp771-tablet-android-6-0-marshmallow-32-gb-10-1-3g-4g/specs/</a> (however, I tested this on Android 7, not 6)</p>