Sudden problems with microsoft edge / webgl

Stonesitter · June 2024

I suddenly can't open my experiment in the Microsoft Edge Browser. It leaves a blank page. In the page source you can see that the problems stems from the browser not supporting WebGl. Now i did some general testing and i actually think that WebGL is running on my browser. So i wanted to ask you guys if you think the problem is on my end or with Microsoft Edge and if you have any possible solutions?

I use a general multiple link. It worked until now. It still works in firefox and qutebrowser.

This thread lead me to WebGL problem.

https://forum.cogsci.nl/discussion/comment/18791#Comment_18791

Mircrosoft Edge is up to date.

<!DOCTYPE html>
	<!--
	OSWEB is distributed under the terms of the GNU General Public License 3.
	The full license should be included in the file COPYING,
	or can be obtained from: http://www.gnu.org/licenses/gpl.txt
	-->
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
	<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
	<title>
	OSWeb
	</title>
	<script src="/assets/javascripts/jatos.js">
	</script>
	<script id="parameters" type="text/javascript">
	const params = JSON.parse('{"subject": "0,1", "fullscreen": true, "fullBackgroundColor": false, "welcomeText": "", "externalJS": [], "introClick": true}')
	const osexpFile = "358b771a-08a1-1640-2d47-88c717df5061.osexp"
	const jatosAssetsFolder = "a47ee561-4ea2-80d4-f47b-548d9201c9ec"
	const jatosComponentHash = "358b771a-08a1-1640-2d47-88c717df5061"
	</script>
	<script src="js/osweb.92488aa609000e3644d2.bundle.js" type="text/javascript">
	</script>
	<script src="js/vendors~osweb.ccbf0e07232eb9eb0239.bundle.js" type="text/javascript">
	</script>
	<script src="js/jatos.js" type="text/javascript">
	</script>
	<script src="js/_shared.js" type="text/javascript">
	</script>
	<link href="css/osweb.92488aa609000e3644d2.bundle.css" media="all" rel="stylesheet" type="text/css"/>
	<link href="css/vendors~osweb.ccbf0e07232eb9eb0239.bundle.css" media="all" rel="stylesheet" type="text/css"/>
	<link href="css/jatos.css" media="all" rel="stylesheet" type="text/css"/>
	</head>
	<body onload="onPageLoad()">
	<main class="d-flex justify-content-center flex-column stretch">
	<div id="webgl-unavailable">
	<p>
	Your browser does not support WebGL, which is required for this experiment.
	</p>
	<p>
	😕
	</p>
	<p>
	Please try another browser or another computer.
	</p>
	</div>
	<div id="osweb_loading">
	<p>
	⏳
	</p>
	</div>
	<div class="osweb-canvas-container">
	<div class="aspectwrapper" id="osweb_div">
	</div>
	</div>
	</main>
	<div id="modal">
	<div class="box">
	<div class="content">
	<div class="icon">
	<div class="lds-ripple">
	<div>
	</div>
	<div>
	</div>
	</div>
	<div class="error">
	<img src="img/warning.png"/>
	</div>
	</div>
	<div class="text">
	<div class="title">
	</div>
	<div class="message">
	</div>
	</div>
	</div>
	</div>
	</div>
	<div id="filePool" style="display:none;">
	<img id="4-yellow-triangle.png" src="pool\4-yellow-triangle.png"/>
	<img id="4-yellow-star.png" src="pool\4-yellow-star.png"/>
	<img id="4-yellow-cross.png" src="pool\4-yellow-cross.png"/>
	<img id="4-yellow-circle.png" src="pool\4-yellow-circle.png"/>
	<img id="4-red-triangle.png" src="pool\4-red-triangle.png"/>
	<img id="4-red-star.png" src="pool\4-red-star.png"/>
	<img id="4-red-cross.png" src="pool\4-red-cross.png"/>
	<img id="4-red-circle.png" src="pool\4-red-circle.png"/>
	<img id="4-green-triangle.png" src="pool\4-green-triangle.png"/>
	<img id="4-green-star.png" src="pool\4-green-star.png"/>
	<img id="4-green-cross.png" src="pool\4-green-cross.png"/>
	<img id="4-green-circle.png" src="pool\4-green-circle.png"/>
	<img id="4-blue-triangle.png" src="pool\4-blue-triangle.png"/>
	<img id="4-blue-star.png" src="pool\4-blue-star.png"/>
	<img id="4-blue-cross.png" src="pool\4-blue-cross.png"/>
	<img id="4-blue-circle.png" src="pool\4-blue-circle.png"/>
	<img id="3-yellow-triangle.png" src="pool\3-yellow-triangle.png"/>
	<img id="3-yellow-star.png" src="pool\3-yellow-star.png"/>
	<img id="3-yellow-cross.png" src="pool\3-yellow-cross.png"/>
	<img id="3-yellow-circle.png" src="pool\3-yellow-circle.png"/>
	<img id="3-red-triangle.png" src="pool\3-red-triangle.png"/>
	<img id="3-red-star.png" src="pool\3-red-star.png"/>
	<img id="3-red-cross.png" src="pool\3-red-cross.png"/>
	<img id="3-red-circle.png" src="pool\3-red-circle.png"/>
	<img id="3-green-triangle.png" src="pool\3-green-triangle.png"/>
	<img id="3-green-star.png" src="pool\3-green-star.png"/>
	<img id="3-green-cross.png" src="pool\3-green-cross.png"/>
	<img id="3-green-circle.png" src="pool\3-green-circle.png"/>
	<img id="3-blue-triangle.png" src="pool\3-blue-triangle.png"/>
	<img id="3-blue-star.png" src="pool\3-blue-star.png"/>
	<img id="3-blue-cross.png" src="pool\3-blue-cross.png"/>
	<img id="3-blue-circle.png" src="pool\3-blue-circle.png"/>
	<img id="2-yellow-triangle.png" src="pool\2-yellow-triangle.png"/>
	<img id="2-yellow-star.png" src="pool\2-yellow-star.png"/>
	<img id="2-yellow-cross.png" src="pool\2-yellow-cross.png"/>
	<img id="2-yellow-circle.png" src="pool\2-yellow-circle.png"/>
	<img id="2-red-triangle.png" src="pool\2-red-triangle.png"/>
	<img id="2-red-star.png" src="pool\2-red-star.png"/>
	<img id="2-red-cross.png" src="pool\2-red-cross.png"/>
	<img id="2-red-circle.png" src="pool\2-red-circle.png"/>
	<img id="2-green-triangle.png" src="pool\2-green-triangle.png"/>
	<img id="2-green-star.png" src="pool\2-green-star.png"/>
	<img id="2-green-cross.png" src="pool\2-green-cross.png"/>
	<img id="2-green-circle.png" src="pool\2-green-circle.png"/>
	<img id="2-blue-triangle.png" src="pool\2-blue-triangle.png"/>
	<img id="2-blue-star.png" src="pool\2-blue-star.png"/>
	<img id="2-blue-cross.png" src="pool\2-blue-cross.png"/>
	<img id="2-blue-circle.png" src="pool\2-blue-circle.png"/>
	<img id="1-yellow-triangle.png" src="pool\1-yellow-triangle.png"/>
	<img id="1-yellow-star.png" src="pool\1-yellow-star.png"/>
	<img id="1-yellow-cross.png" src="pool\1-yellow-cross.png"/>
	<img id="1-yellow-circle.png" src="pool\1-yellow-circle.png"/>
	<img id="1-red-triangle.png" src="pool\1-red-triangle.png"/>
	<img id="1-red-star.png" src="pool\1-red-star.png"/>
	<img id="1-red-cross.png" src="pool\1-red-cross.png"/>
	<img id="1-red-circle.png" src="pool\1-red-circle.png"/>
	<img id="1-green-triangle.png" src="pool\1-green-triangle.png"/>
	<img id="1-green-star.png" src="pool\1-green-star.png"/>
	<img id="1-green-cross.png" src="pool\1-green-cross.png"/>
	<img id="1-green-circle.png" src="pool\1-green-circle.png"/>
	<img id="1-blue-triangle.png" src="pool\1-blue-triangle.png"/>
	<img id="1-blue-star.png" src="pool\1-blue-star.png"/>
	<img id="1-blue-cross.png" src="pool\1-blue-cross.png"/>
	<img id="1-blue-circle.png" src="pool\1-blue-circle.png"/>
	</div>
	</body>
	</html>

That is the error message.