three.js unexpected resizing on mobile devices - performance

Question

I am getting a strange issue with scaling scene in three.js only on mobile devices.
Everything is alright when I watch it on desktop, but on mobile it always scaling and blinking...
Here is link to codepen: https://codepen.io/elliepooh/pen/evXgdE
And here is my init function:
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.lookAt(scene.position);
camera.position.set(30, 15, 15);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
renderer.setClearColor(0xF2A9B4);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
controls = new THREE.OrbitControls(camera, renderer.domElement);
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
addLights();
drawChameleon();
drawBranch();
drawFly();
document.body.appendChild(renderer.domElement);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
window.addEventListener('resize', onResize);
}
Maybe I missed something?
Any assistance is appreciated.

Answer 1

Finally I solved the problem by appending domElement to existing div#world and adding this to my css:
body {
margin: 0;
}
#world {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
Great thanks to #AlexFallenstedt. Once I knew the reason was in iOS, not in my code, it made me relax and resolve the problem.

Answer 2

I think I know what you mean. I encountered this "blinking" bug before when displaying a three.js scene on mobile. Are you testing this on iOS? If so, when you scroll down on ios, the browser's nav bar shrinks. Your code has renderer.setSize(width, height), and will resize the entire canvas because of your event listener. When your canvas resizes, weird things happen because it's both trying to animate and resize...
How I got around it was by adding a function in render()
function resizeCanvas() {
if (canvas.width != canvas.clientWidth ||
canvas.height != canvas.clientHeight) {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
}
}
It asks if the canvas' width and height is looks like the client's width and height. If it doesn't, it kind of forces the canvas to be that width and height.
You can see it in action here:
https://github.com/Fallenstedt/Fallenstedt.github.io/blob/master/_js/index.js#L128-L135