martinlaxenaire/curtainsjs

Strange behaviour on Safari ping/pong shading flowmap example

droplab opened this issue · 4 comments

droplab commented

Describe the bug
Strange shader behaviour on Safari when running the ping/pong shading flowmap example.

To Reproduce
Steps to reproduce the behavior:

  1. In Safari 14+ visit https://www.curtainsjs.com/examples/ping-pong-shading-flowmap/index.html
  2. Move the mouse cursor around

Expected behavior
A constantly rendering distortion effect while moving the mouse around. Important to note that the all works properly when moving the mouse WHILE pressing and holding.

Screenshots
https://imgur.com/a/IxwrUiT
https://imgur.com/a/1AkPyyu

Desktop (please complete the following information):

  • OS: Mac Big Sur
  • Browser safari
  • Version 15
droplab commented

Hi @martinlaxenaire, this FEELS like a pointer event (x,y,delta etc...) normalization issue not necessarily an issue with the library or the shader itself. Perhaps the pointer event data coming in from Safari is either out of the expected range and/or is below a threshold.

Many thanks for the great work on this library!

droplab commented

Related to

So it sounds like this may be due to Safari throttling mouse events internally... seems doubtful that there would be any external fix possible for this.

martinlaxenaire commented

Hey @droplab,

thanks for the detailed bug report, however as you've already noticed, this seems to be caused by how Safari handles mouse events and not the lib itself.

Cheers,

droplab commented

Hi @martinlaxenaire, thanks for the reply. I wanted to share this solution for future reference or in case you wanted to update your example.

After doing some additional testing we discovered the issue is that Safari is throwing too many mousemove events that seem to be interrupting rendering performance. Throttling the mouse events down to fall within 60fps or lower solves the issue.

Cheers!

  • 👍1