Safari breaking change to touch actions/scrolling

[jonathanolson]

@kathy-phet noticed that if you view a sim with iOS 11.3+, the dragging behavior is pretty broken. It tries to scroll, even though we've specified the proper CSS to prevent this (touch-action).

I'm looking for workarounds, but other people have noticed this regression also (https://stackoverflow.com/questions/49047414/disable-scroll-swipe-action-for-html-canvas-drawing-on-ios).

[jonathanolson]

preventDefault on ALL events does not stop the dragging issues.

[jonathanolson]

One related bug, mentions other threads: https://bugs.webkit.org/show_bug.cgi?id=184250

Investigating.

[jonathanolson]

atlassian/react-beautiful-dnd#413 (comment) was the key comment to understand what Safari is doing. They have the fun combination of moving to passive events by default AND not supporting touch-action: none. Chrome moved to passive actions, but it doesn't cause a problem for us because it respects the CSS.

I'll have patches here soon.

[jonathanolson]

@ariel-phet and @phet-steele, these commits will need cross-platform testing to make sure I didn't break things. In particular, check desktop Safari (with touch if possible?), mobile safari (iPad and iPhone), Android (would be good to know if I broke something), IE11 (since it doesn't support a certain newer way of specifying things).

@ariel-phet, this may be a candidate for maintenance release, depending on its impact. Can we update an iPad to 11.3 (if we haven't) to see if this is an issue with our current sims?

[jonathanolson]

I'm also going to look if we can leave the "default" behavior on Chrome so that we can just have the preventDefault calls no-op, since it will have technically higher performance.

[jonathanolson]

Looks like the main Safari feature request for the "change" is https://bugs.webkit.org/show_bug.cgi?id=175346

Also notably:

See https://bugs.webkit.org/show_bug.cgi?id=182521 for discussion of the fall-out of shipping this without also shipping touch-action.

[jonathanolson]

Updated the title to better reflect the scope.

[jonathanolson]

Initial "fixed" test deployment: https://bayes.colorado.edu/dev/html/capacitor-lab-basics/1.7.0-dev.4/phet/capacitor-lab-basics_en_phet.html

[kathy-phet]

Looking good here!

…

Sent from my iPhone On Apr 18, 2018, at 9:38 PM, Jonathan Olson <[email protected]<mailto:[email protected]>> wrote: Initial "fixed" test deployment: https://bayes.colorado.edu/dev/html/capacitor-lab-basics/1.7.0-dev.4/phet/capacitor-lab-basics_en_phet.html — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#770 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AE3FZC-STsNkEXg3IyVVODYxqYRE79JQks5tqBSygaJpZM4TbCd->.

[jonathanolson]

Hmm, it looks like with the workaround to prevent the passive events, on my iPhone it's possible to get this layout on reload (only while starting on landscape):

Swapping portrait/landscape fixes it (and makes the top navigation bar interestingly go away completely), and it doesn't seem to be happening on the first load.

I'm getting a URL ready for testing with this. Different scenery versions are going to have somewhat different patches anyways, so I'm curious whether it happens (additionally) in the above CLB link (I'll test).

[kathy-phet]

FYI - in iOS, the top nav bar has been going away upon rotate for quite a while, so it has been possible to go "full screen" in a way. However, some controls are close to the top edge and then cause the nav bar to come back. If that happens, I just rotate back and forth to get back to full screen.

[jonathanolson]

Maintenance-patched version of acid-base-solutions: https://bayes.colorado.edu/dev/html/acid-base-solutions/1.2.12-rc.3/acid-base-solutions_en.html

FYI - in iOS, the top nav bar has been going away upon rotate for quite a while, so it has been possible to go "full screen" in a way. However, some controls are close to the top edge and then cause the nav bar to come back. If that happens, I just rotate back and forth to get back to full screen.

If that's a problem on an iPad, I'm not sure users would know (or want) to do that as a workaround. I feel investigating a fix for this behavior might be helpful in general. Thoughts?

[jonathanolson]

In addition to the acid-base-solutions patch above, I'll be patching:

area-builder/1.1.6
arithmetic/1.0.10
atomic-interactions/1.0.4
balancing-act/1.1.10
balancing-chemical-equations/1.1.10
balloons-and-static-electricity/1.2.4
beers-law-lab/1.4.5
bending-light/1.1.7
build-an-atom/1.6.0
capacitor-lab-basics/1.5.0
charges-and-fields/1.0.4
circuit-construction-kit-dc/1.0.1
circuit-construction-kit-dc-virtual-lab/1.0.1
color-vision/1.1.10
concentration/1.3.7
energy-skate-park-basics/1.1.6
expression-exchange/1.1.0
faradays-law/1.1.10
forces-and-motion-basics/2.3.0
fraction-matcher/1.1.8
friction/1.4.0
function-builder/1.0.10
function-builder-basics/1.0.2
gene-expression-essentials/1.0.1
graphing-lines/1.2.1
graphing-slope-intercept/1.0.1
gravity-and-orbits/1.1.2
gravity-force-lab/2.1.2
hookes-law/1.0.10
isotopes-and-atomic-mass/1.0.9
john-travoltage/1.3.1
least-squares-regression/1.1.7
make-a-ten/1.0.3
molarity/1.3.1
molecule-polarity/1.0.2
molecule-shapes/1.1.11
molecule-shapes-basics/1.1.9
molecules-and-light/1.4.0
neuron/1.1.4
ohms-law/1.3.8
pendulum-lab/1.0.2
ph-scale/1.2.11
ph-scale-basics/1.2.11
plinko-probability/1.1.2
projectile-motion/1.0.2
proportion-playground/1.0.1
reactants-products-and-leftovers/1.1.10
resistance-in-a-wire/1.4.0
rutherford-scattering/1.0.7
states-of-matter/1.0.2
states-of-matter-basics/1.0.2
trig-tour/1.0.9
under-pressure/1.1.5
unit-rates/1.0.4
wave-on-a-string/1.1.9

with Scenery versions sorted by date:

42dbb7a935b8e6a6e04759d56bacd3b1a77c0b58 2015-10-13 08:55:56 -0600
  hookes-law
78f5dc168e57df1942df7355f13206982c3a9834 2015-10-30 14:07:28 -0600
  faradays-law
6561edbbedd768278cde5d30b2917267892fc7b6 2015-11-10 00:51:59 -0700
  ph-scale
  ph-scale-basics
98428866174e137c6c15b526be96dd6fcecd9921 2015-11-13 12:41:42 -0700
  balancing-chemical-equations
  reactants-products-and-leftovers
5651eaa3dc439f8769de8670f01fdc09b0af0a28 2015-12-09 18:41:57 -0700
  arithmetic
5ef7dde69f024ea21d588cb817db70dcf56e8f92 2016-01-28 09:56:31 -0700
  molecule-shapes
  molecule-shapes-basics
d1cb4be65117f0db7ec536df50d7ba64f4f697a3 2016-02-03 20:24:38 -0700
  trig-tour
2c13f9101befca596de2571fd6ced8d8ff05e9e1 2016-02-11 13:12:30 -0700
  color-vision
  ohms-law
4ab9fc738e721e9e293042205c48a6d31505db98 2016-02-24 13:20:00 -0700
  balancing-act
  fraction-matcher
  least-squares-regression
  wave-on-a-string
4c1b5315da0b750b1695552c3af887d233ab9058 2016-03-30 23:48:56 -0600
  energy-skate-park-basics
0a973c4232ff526b99171784a2e999d4eee65b59 2016-04-29 17:31:48 -0600
  area-builder
4e4154171c4705f91f875f2c448bc8fb2b95f15e 2016-05-10 00:06:06 -0600
  isotopes-and-atomic-mass
  under-pressure
860f0b5ac339c1defadb9431f946202b5afbfd67 2016-05-20 16:27:16 -0600
  beers-law-lab
  concentration
76a6035fe2ae86e3672467ee1501d2fb2b5c60e0 2016-07-03 13:03:16 -0400
  function-builder
a4cb8cfdb24285a993180c2a936cf0056170950e 2016-08-03 18:09:17 -0600
  rutherford-scattering
0886016599db5ee89866b50f1eecde5671dca2a3 2016-08-09 17:25:52 -0600
  bending-light
  charges-and-fields
3a5aa6e8db7434899f541c0a86eb8a504de783b2 2016-08-30 20:34:46 -0600
  atomic-interactions
182dae833f6708dcce1f50d7f2bcf9c1586d2b7a 2016-09-12 11:09:26 -0600
  neuron
cd3a7a2dd7abb794b7e38b487f9f6ffd0bb48677 2016-12-11 19:18:11 -0700
  states-of-matter
  states-of-matter-basics
e4ea5931182d2c89b3019d29821950a8b453e31e 2017-01-13 22:43:11 -0700
  make-a-ten
7467d9be271115fe0d544da886267adbc4e6b453 2017-01-26 14:46:44 -0700
  gravity-force-lab
3ce1f9825d4d02971e503b8b7d617ed44462ec65 2017-02-14 11:30:16 -0600
  gravity-and-orbits
06d4ce8ca38b224b21bf98e31f490e43c5ab7906 2017-02-21 23:06:47 -0700
  balloons-and-static-electricity
4619049e07623c09c616fe8853387a4c8a7bed2a 2017-04-03 13:17:07 -0600
  unit-rates
69953c5cf61304f01c07c45342d078f80c468735 2017-04-17 10:30:34 -0600
  function-builder-basics
d1d2ca2da5b54aefde7704318d5c4ceaf6d27612 2017-04-25 01:47:10 -0500
  graphing-lines
  graphing-slope-intercept
652bc7fc5ac842a913b19f597440552df3af5983 2017-05-08 16:23:51 -0600
  john-travoltage
a83739b9a01f15c5cf07396c4a318e27a5a5422f 2017-05-11 14:20:58 -0600
  proportion-playground
637bbedcd59d2737c2eab8946eb0c8eba6ef1623 2017-06-07 14:33:55 -0600
  plinko-probability
748a0462b0e21d00f48be047b35d0bfb45be6bce 2017-06-16 12:13:57 -0800
  molarity
494ce43dcce4aa3ff84dffdd334fd42d6202d224 2017-06-21 14:03:40 -0600
  expression-exchange
a3198c0756e5824df63b5c2a6bc38ffd8b3c8f1f 2017-07-14 11:24:32 -0600
  build-an-atom
d4481c51993d6c344169ac75e4c7ea1046621ab6 2017-07-19 21:30:20 -0600
  molecule-polarity
684fffd2f98d7d8493f862c18c1186c28a2d5da9 2017-08-15 14:37:01 -0600
  projectile-motion
d539ecd71d78236090201a5a4215f22651741c70 2017-08-21 17:35:04 -0600
  forces-and-motion-basics
5f5f86115ad857977fed0bc26b2999b7d05be2b2 2017-08-21 17:35:04 -0600
  pendulum-lab
db7ea875eaba59fe7f4c929d8e88832c5f0ab995 2017-10-10 13:37:22 -0600
  circuit-construction-kit-dc
  circuit-construction-kit-dc-virtual-lab
5e8b7cd2e1b088efecaf33eaec3cebb348bd8779 2017-10-10 13:37:22 -0600
  resistance-in-a-wire
92a2872de17089e1687e55424081d27897fa47a5 2017-10-24 19:01:17 -0600
  gene-expression-essentials
9caeb049658109bee10ae4efb13b382e9ca21f51 2017-11-07 17:03:19 -0700
  capacitor-lab-basics
2defc082268b055e55d2bd34071f26064b3aebb9 2017-12-03 07:16:44 -0700
  friction
972ca6d79a0e853d0fda62b3f49a0ccedc59c03c 2018-01-12 11:01:06 -0700
  molecules-and-light

(total of 41 Scenery SHAs that will be patched).