stuyam / pressure

:point_down::boom: JavaScript library for handling Force Touch, 3D Touch, and Pointer Pressure.
https://pressurejs.com
MIT License
2.91k stars 98 forks source link

Prevents scroll on touch device #30

Closed PhilipCrumpton closed 7 years ago

PhilipCrumpton commented 8 years ago

I cannot scroll when touching an element with a pressure listener. Confirmed also on http://pressurejs.com/ on test elements though does not occur on red button (support check) at top.

In my case I'm using startDeepPress and endDeepPress and both cause this behavior.


Please provide information about the device you are seeing the issue on Device is a iPhone6S Operating system is iOS 9.3.1 Browser is iOS Safari and iOS Chrome 49.0.2623.109

stuyam commented 8 years ago

@PhilipCrumpton as a test, try passing in the options {preventDefault: false} as the last parameter in the pressure block and see if that has any effect on the issue. Keep me posted on what you find out!

Pressure.set('#test', {
  start: function(event){
    // console.log('cool it started');
  }
}, {preventDefault: false});
PhilipCrumpton commented 8 years ago

That does resolve the issue, thank you! If it is possible to preserve scroll and prevent other default events that would be a nice feature.

Thank you very much for your work on this library and your quick support. Very appreciated!

stuyam commented 8 years ago

@PhilipCrumpton I will play around with it and see if I can come up with a way to give the best of both worlds. However the preventDefault stuff might just work that way on iOS. For example on iOS the preventDefault is setting webkitTouchCallout = "none"; and webkitUserSelect = "none";. One of those is blocking scrolling but if you remove it it will stop using those fixes. I will do some testing and see if I can find a way around or something.

I also have another question for you. When you have the option {preventDefault: false} set and you can scroll while applying force, does the force returned cut between 0 and the actual force as you scroll? I was just testing it on the simulator on pressurejs.com and that is what was happening but I wasn't sure if that was the simulators fault or not.

Also thanks so much for the support! That means a lot, really appreciate you taking an interest in the library. I would ❤️ to hear more about what you are working on using pressure.

PhilipCrumpton commented 8 years ago

No, in my case the force returned is consistent with the force applied.

Also, for clarification, from what I can tell iOS native behavior (without PressureJS) doesn't scroll in browser when a deep touch is applied. It seems to scroll when force is less than 0.5 though that number MAY be different.

With PressureJS and preventDefault: true, I was unable to scroll when touching an element with a pressure listener applied, regardless of the pressure force.

PhilipCrumpton commented 8 years ago

Oh, and to answer your question about what I'm using it for, upcoming web design/dev projects I have a vision for subtle prompts to "click harder" for additional UI interaction. Some just for visual fun but I'm hoping to find some useful interactions. I'm excited about force interaction and hope it grows UI experience.

stuyam commented 8 years ago

All this information is great @PhilipCrumpton. It excites me that other people are excited about this stuff like I am 👍 I would really love to see what you are working on and if you have something live I will put it up on the pressure documentation site as an example. DM me on Twitter @StuYam if you wanna chat about it.

stuyam commented 7 years ago

@PhilipCrumpton this scrolling issue is fixed by this commit in v2.0.0 of pressure which is not out yet but will be coming out soon: https://github.com/stuyam/pressure/commit/75fd0603e2ef74349953b7f240605dc2eb32247b

The issue was with the actual "preventDefault()" method that was being called on the touch events. Now by default it only applies the css to prevent selection but will not break scrolling and you can only optionally prevent the event defaults from the touch events.

stuyam commented 7 years ago

See issue: https://github.com/stuyam/pressure/issues/36