Simulation speed too fast

Tried to look but could not see anyone else talking about this issue.

So I have noticed that at least in Chrome 77/78 and Firefox 70 Mater js simulation runs roughly double the speed than in older browsers. If I run same code in Chrome 74 (happened to be the version OBS Browser uses atm) it runs like normal.

So I don’t know what, but something has changed in newer browsers that make Mater js run faster.

But I have come up with an temporary fix, at least for Chrome. In setup I put

function setup(){
	engine = Engine.create();
	// Checks version and adjust timeScale
	if (navigator.version > 74) {
		engine.timing.timeScale = 0.55;
	}
	Engine.run(engine);
}

and use these functions to get browser version

// Returns browser name and version, found it from here https://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser
navigator.sayswho = (function(){
    var ua= navigator.userAgent, tem, 
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

// Returns just version as a number
navigator.version = (function(){
	var v = navigator.sayswho.split(" ")[1];
	return parseInt(v);
})();

Would not take much adjustment to make temporary fix for other browsers but I mainly need/use chrome.

Biggest problem I see with this issue is that when people update to newer versions of browsers (at least Chrome 77 and newer) is that games on the web that use Mater js is going to run too fast.

EDIT: Forgot to mention that I don’t use the render part of Matter js in case that could affect the speed? I have built my own system to “attach” html elements to Matter js object body. Just reads the body position and move the element with js/css.

[wassfila]

@ZpeedTube , I think this can easily be fixed, feel free to have a look at the solution I linked to this tikcet. As long as you call the run inside

    requestAnimationFrame( animate );

this function should be in sync with the refresh rate, and the solution I suggested adjust the time parameters by itself so no hardware specific configuration is needed. I hope this could help with your issue.

[wassfila]

@ZpeedTube Welcome. Glad this idea from #818 helped 😃