This appears fixed for me when upgrading to iOS 14.3. You can consult bug #219780 I filed on WebKit's bug tracker for more discussion.
https://bugs.webkit.org/show_bug.cgi?id=219780
markschlosseratbentley
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Post
Replies
Boosts
Views
Activity
Here is the jsfiddle code.
HTML:
<canvas>Your browser does not support HTML5 canvas.</canvas>
CSS:
{ margin:0; padding:0; }
html, body { width: 100%; height: 100%; }
canvas { display: block; }
JavaScript:
var _canvas;
var _gl;
var _buffer;
var _shaderProgram;
var _coordinatesVar;
var _widths = [768, 1024];
var _heights = [1024, 768];
var _dimIndex = 0;
var _resizeStartTime = undefined;
function _setupScene() {
	_canvas = document.getElementsByTagName("canvas")[0];
	_gl = _canvas.getContext("webgl") || _canvas.getContext("experimental-webgl");
	if (!_gl)
		throw new Error("Cannot create WebGL context!");
	var vertices = [
		-0.5, 0.5,
		-0.5, -0.5,
		0.5, -0.5,
		0.5, -0.5,
		-0.5, 0.5,
		0.5, 0.5,
	];
	_buffer = _gl.createBuffer();
	_gl.bindBuffer(_gl.ARRAY_BUFFER, _buffer);
	_gl.bufferData(_gl.ARRAY_BUFFER, new Float32Array(vertices), _gl.STATIC_DRAW);
	
	var vertCode =
		'attribute vec2 coordinates;' +
		'void main(void) {' +
		'	gl_Position = vec4(coordinates, 0.0, 1.0);' +
		'}';
	var vertShader = _gl.createShader(_gl.VERTEX_SHADER);
	_gl.shaderSource(vertShader, vertCode);
	_gl.compileShader(vertShader);
	if (!_gl.getShaderParameter(vertShader, _gl.COMPILE_STATUS))
		throw new Error(_gl.getShaderInfoLog(vertShader));
	var fragCode =
		'void main(void) {' +
		'	 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' +
		'}';
	var fragShader = _gl.createShader(_gl.FRAGMENT_SHADER);
	_gl.shaderSource(fragShader, fragCode);
	_gl.compileShader(fragShader);
	if (!_gl.getShaderParameter(fragShader, _gl.COMPILE_STATUS))
		throw new Error(_gl.getShaderInfoLog(fragShader));
	_shaderProgram = _gl.createProgram();
	_gl.attachShader(_shaderProgram, vertShader);
	_gl.attachShader(_shaderProgram, fragShader);
	_gl.linkProgram(_shaderProgram);
	if (!_gl.getProgramParameter(_shaderProgram, _gl.LINK_STATUS))
		throw new Error(_gl.getProgramInfoLog(_shaderProgram));
	_gl.useProgram(_shaderProgram);
	_coordinatesVar = _gl.getAttribLocation(_shaderProgram, "coordinates");
	_gl.enableVertexAttribArray(_coordinatesVar);
	_gl.bindBuffer(_gl.ARRAY_BUFFER, _buffer);
	_gl.vertexAttribPointer(_coordinatesVar, 2, _gl.FLOAT, false, 0, 0);
	
	/* initial auto-resize */
_canvas.width = _widths[_dimIndex];
_canvas.height = _heights[_dimIndex];
	_dimIndex = _dimIndex > 0 ? 0 : 1;
}
function _drawScene() {
	_gl.drawArrays(_gl.TRIANGLES, 0, 6);
}
function _render(timestamp) {
/* The following makes the canvas resizing based on browser window (fullscreen):
		_canvas.width = window.innerWidth;
		_canvas.height = window.innerHeight;
		*/
	
	/* The following automatically changes the canvas dimensions back and forth between two dimensions every second: */
if (undefined === _resizeStartTime)
	 _resizeStartTime = timestamp;
	const elapsed = timestamp - _resizeStartTime;
	if (elapsed > 1000) {
	_canvas.width = _widths[_dimIndex];
		_canvas.height = _heights[_dimIndex];
		_dimIndex = _dimIndex > 0 ? 0 : 1;
		_resizeStartTime = undefined;
	}
	_gl.viewport(0, 0, _canvas.width, _canvas.height);
	_gl.clearColor(0.8, 0.8, 0.8, 1.0);
	_gl.clear(_gl.COLOR_BUFFER_BIT);
	
	_drawScene();
	
window.requestAnimationFrame(_render);
}
window.addEventListener("load", function() {
_setupScene();
window.requestAnimationFrame(_render);
}, false);