[iOS] Prevent autoscroll to focused editable

[raineorshine]

Steps to Reproduce

- a
  - b
  - c
  - d
  - e
  - f
  - g
  - h

1. Set cursor to null and scroll so that all thoughts are within the viewport.
2. Tap on h and enter edit mode

Current Behavior

The window scrolls down so that the focused thought is in the middle of the screen. The top thoughts are now obscured.

https://user-images.githubusercontent.com/750276/212205968-d020bc5d-fe3d-49a8-89e7-a64773f10df0.MOV

Expected Behavior

Autoscroll should scroll the minimum amount necessary to bring the cursor thought into view.

To Do

• [x] el.focus({ preventScroll })
  • Needs to work on tap, without programmatic focus
• [x] onTouchEnd
  • e.preventDefault does stop anything from happening, but any attempt to focus causes the scroll.
• [x] body-scroll-lock
• [x] once scroll scrollTo
  • scroll position is maintained, but screen jumps
• [x] focus focusIn
• [x] setting contenteditable after touch
• [x] override scrollIntoView
• [x] position: fixed
• [x] transform
• [x] add readonly ontouchstart, and remove ontouchend
• [x] keyframes
• [x] opacity: 0 gist
• [x] overflow: hidden
• [ ] https://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/35675094#35675094
• [ ] Crop to bottom edge
• [ ] cordova.plugins.Keyboard.disableScroll

References

• https://stackoverflow.com/questions/6740253/disable-scrolling-when-changing-focus-form-elements-ipad-web-app/39584526
• https://stackoverflow.com/questions/47800185/jquery-mobile-how-to-stop-auto-scroll-to-focused-input-in-mobile-web-browser/47805387
• https://stackoverflow.com/questions/2952782/preventing-an-input-element-from-scrolling-the-screen-on-iphone/7451425
• https://stackoverflow.com/questions/14327909/phonegap-ios-prevent-scrolling-on-input-focus
• https://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/35675094
• https://github.com/adobe/react-spectrum/pull/1105

[raineorshine]

iOS Safari supports focus({ preventScroll: true }) as of v15.5:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#browser_compatibility

However this doesn't help when entering edit mode, which uses the default browser touch events. We cannot preventDefault when a user taps on a thought, since we need the browser to place the caret where the user taps.

[raineorshine]

Solution: https://stackoverflow.com/a/76731361/480608

[raineorshine]

Related: #1751

Not currently reproducible, but may recur after the current approach to cropping space around visible thoughts is changed.