I recently tried out Vivaldi browser on my laptop for running some self-built THREE.js apps. The app performs much faster on Vivaldi than on Opera which I normally use, or on Firefox.
I have found a problem though. When using Orbit Controls and trying to move (translate) the camera viewpoint using mouse-right-button-click + drag. This works OK in Opera and Firefox. But in Vivaldi a left or right drag sometimes causes the browser to move to the previous or next page. In the debugger I got a message "Unable to preventDefault inside passive event listener invocation."
My original addEventListener initiation code was this:-
document.addEventListener( 'touchstart', onDocumentTouchStart,false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener ( 'resize', onWindowResize, false );
The relevant invocation code was/is as follows:-
//... Allows OrbitControls to do drag origin by preventing default reaction (prev/next page)
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//... Allows OrbitControls to do drag origin by preventing default reaction (prev/next page)
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
I followed a link provided to https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and changed my initiationcode to the following:-
var passiveSupported = false;
try
{
var options = {
get passive() { // This function will be called when the browser
// attempts to access the passive property.
passiveSupported = true;
}
};
window.addEventListener("test", options, options);
window.removeEventListener("test", options, options);
}
catch(err)
{
passiveSupported = false;
}
//MY MODIFIED STUFF
document.addEventListener( 'touchstart', onDocumentTouchStart, passiveSupported
? { passive: true } : false);
document.addEventListener( 'touchmove', onDocumentTouchMove, passiveSupported
? { passive: true } : false);
document.addEventListener( 'mousemove', onDocumentMouseMove, options );
window.addEventListener ( 'resize', onWindowResize, options );
Now Vivaldi reports that passiveSupported = true but the error message and the problem remain.
I'd be grateful if anyone could cast light on what is happening here as I would like to use Vivaldi but this page jumping problem makes it unusable for some of my apps.