0
IOS WebGL есть ошибка, которая может быть воспроизведена с следующей HTML:Resize WebGL контекста в IOS
<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>
Я загрузил этот HTML для http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html, так что вы можете запустить его легко.
Для людей, у которых нет устройства iOS, я загрузил скриншоты своего iPad before и after нажав кнопку, которая показывает ошибку в iOS.
Этот код работает на настольных браузерах и Android, но в iOS измененное окно WebGL выходит за пределы холста и топает на вещи за пределами холста. Это ошибка в iOS. Ошибка уходит, если devicePixelRatio установлен в 1, но я хочу использовать более высокое разрешение экранов сетчатки.
Как изменить размер холста WebGL с высоким разрешением в iOS?