Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples: Fix controls in webgl_multiple_scenes_comparison. #20223

Merged
merged 1 commit into from
Aug 31, 2020

Conversation

Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented Aug 30, 2020

@@ -7,6 +7,10 @@
<link type="text/css" rel="stylesheet" href="main.css">
<style>

html, body {
touch-action: none;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Owner

@mrdoob mrdoob Aug 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also battled with this today. Safari/iOS doesn't support this.

I ended up doing this instead:

window.addEventListener( 'touchstart', function ( event ) {

    event.preventDefault(); // prevent scrolling

} );

Copy link
Collaborator Author

@Mugen87 Mugen87 Aug 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I add this code, I get the following runtime error in Chrome:

webgl_multiple_scenes_comparison:190 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

It only seems to work if I mark the listener as non-passive:

window.addEventListener( 'touchstart', function ( event ) {

    event.preventDefault(); // prevent scrolling

}, { passive: false } );

Not sure if this is appropriate 🤔 .

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, maybe document.body instead?

This touchstart and touch-action gotcha is such a pain...

Maybe in this case touch-action is better actually.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, maybe document.body instead?

Unfortunately, I see the same error with document.body.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In TransformControls I did this:

domElement.addEventListener( 'touchstart', function ( event ) {

    event.preventDefault(); // prevent scrolling

} );

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Um, why does this approach work with TransformControls but not in the example 🤔 ?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe because I'm adding it to the renderer.domElement directly?

Copy link
Collaborator Author

@Mugen87 Mugen87 Aug 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tested this right now. The errors go away but the UI behavior is still the same. Meaning pointermove gets canceled after a short usage.

It only works if I add all event listeners to renderer.domElement. But then it's not possible to just drag the slider element.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I'll merge this and play around with the code 👍

@mrdoob
Copy link
Owner

mrdoob commented Aug 31, 2020

Thanks!

@mrdoob
Copy link
Owner

mrdoob commented Aug 31, 2020

I ended up doing quite a bit of clean up: 65494f3

But the solution was adding the listener to slider:

slider.addEventListener( 'touchstart', function ( event ) {

	event.preventDefault(); // prevent scrolling

} );

I have not tested if slider.style.touchAction = 'none' works yet... I'll test that later today.

@mrdoob
Copy link
Owner

mrdoob commented Sep 1, 2020

Okay, seems like slider.style.touchAction = 'none' works. At least in the latest Safari/iOS...

I'll update the code.

@mrdoob
Copy link
Owner

mrdoob commented Sep 1, 2020

fef0b7a a72e73d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants