{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一夜七次 的问题《Resize WebGL context in iOS》','https://www.manongdao.com/q-1102283.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
iOS WebGL has a bug, which can be reproduced with following HTML:
<html>
<head>
<title>Resize WebGL</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<input type="button" id="resizeButton" value="resize"><br>
<canvas id="chart" style="width:100px; height:100px; border:1px solid #000;">
<script>
var canvas = document.getElementById('chart');
var gl = null;
function resetGL() {
var devicePixelRatio = 2; // Warning: overrides window.devicePixelRatio
var w = Math.floor(canvas.clientWidth * devicePixelRatio);
var h = Math.floor(canvas.clientHeight * devicePixelRatio);
if (canvas.width != w || canvas.height != h) {
console.log("resetGL: Setting canvas.width=" + w + " canvas.height=" + h);
canvas.width = w;
canvas.height = h;
}
if (!gl || gl.isContextLost()) {
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
console.log("Allocated WebGL context: " + gl);
}
}
function redraw() {
requestAnimationFrame(function () {
resetGL();
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(1, 1, 0.8, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
});
}
var bToggle = false;
function resize() {
bToggle = !bToggle;
var s = bToggle ? '50px' : '100px';
console.log("");
console.log("Button: Setting canvas.style.width=" + s + " canvas.style.height=" + s);
canvas.style.width = s;
canvas.style.height = s;
redraw();
}
var button = document.getElementById('resizeButton');
button.addEventListener("click", resize);
redraw();
</script>
</canvas>
<br>
Press "resize", and iOS stomps on this text!
</body>
</html>
I have uploaded this HTML to http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html so you can run it easily.
For people who don't have an iOS device, I have uploaded screenshots of my iPad before and after pressing the button, which show the bug in iOS.
This code works on desktop browsers and Android, but in iOS the resized WebGL window goes outside the Canvas and stomps on stuff outside the canvas. This is a bug in iOS. The bug goes away if devicePixelRatio is set to 1, but I want to use the higher resolution of retina screens.
How can I resize a high resolution WebGL canvas in iOS?
I found a work-around. The app should put the WebGL <canvas> element inside a <div>, and recreate the <canvas> element whenever the <div> size changes. Also, the <canvas> should have no border to avoid another iOS bug in placing the GL window inside the canvas with thick border in retina displays. If you want a border, then just put the border on the <div> element.