WordPress.org
Get WordPress

Make WordPress Core

Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#31247 closed defect (bug) (fixed)

Scrolling and zooming is frustrating on iOS

Reported by: iseulde's profile iseulde Owned by:
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.0
Component: TinyMCE Keywords: needs-patch make-flow
Focuses: javascript Cc:

Description (last modified by iseulde)

Sometimes it's really hard to scroll past the editor.

If you scroll down quickly by pushing the content up or down with your finger, the editor is often focussed again which causes the page to scroll back to the original position. Similarly, if you've accidentally zoomed in the page and want to zoom out using two fingers, the editor is often just focussed again and not zoomed at all. I noticed that both of these issues only happen if you make the movements fast, zooming in slowly with your fingers will work. It only seems to be a problem when the editor has previously been focussed.

This is a problem in the TinyMCE demo too, so I'll report this. TinyMCE tries to detect clicks by looking at touchstart and touchend events and compares the time difference and distance travelled, so it may have something to do with that. It only does this if the time difference is less than 500ms, which would explain why long movements work.

​https://github.com/tinymce/tinymce/blob/7de8b6ce3578b063154148c840642d9fd8e7c503/js/tinymce/classes/util/Quirks.js#L1143

Attachments (1)

31247.patch​ (685 bytes) - added by iseulde 8 years ago.

Download all attachments as: .zip

Change History (16)

#1 @iseulde
9 years ago

  • Description modified (diff)

#2 @iseulde
9 years ago

This is definitely a bug in TinyMCE. Turning this off (editor.off('touchstart');) 'solves' it.

#3 @iseulde
9 years ago

Reported this directly upstream.

#4 @iseulde
9 years ago

#31536 was marked as a duplicate.

#5 @iseulde
9 years ago

Also happens in IE as described in the ticket above.

@iseulde
8 years ago

#6 @iseulde
8 years ago

Above patch: of course we can't do this, just for testing.

This ticket was mentioned in ​Slack in #core-flow by iseulde. ​View the logs.
8 years ago

#8 @ryan
8 years ago

Well behaved scrolling on my iPhone 6+ and Nexus 5. Of course, tapping around in the editor becomes questionable. Neat test. Fun to see what post-new could be like if it wasn't burdened with bad editor scrolling. :-)

Last edited 8 years ago by ryan (previous) (diff)

#9 @iseulde
8 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version set to 4.0

Introduced in [29458].

#10 @ryan
8 years ago

  • Keywords make-flow added

#11 @iseulde
8 years ago

  • Milestone changed from Future Release to 4.3
  • Resolution set to fixed
  • Status changed from new to closed

I'm glad to report that this is fixed!

​https://github.com/tinymce/tinymce/commit/4cb4d5c1c8494b156d6c94f6761156acbe1871b0

See [32801].

Version 0, edited 8 years ago by iseulde (next)

This ticket was mentioned in ​Slack in #core-editor by boren. ​View the logs.
8 years ago

This ticket was mentioned in ​Slack in #core-flow by boren. ​View the logs.
8 years ago

#15 @ryan
8 years ago

Looking good on an iPhone 6+ with both post-new.php and Press This. This is a huge iOS usability improvement. I can now scroll the editor without constant keyboard flyup and scroll jumping. I updated the top 5 list to note the fix. ​https://make.wordpress.org/flow/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/

Note: See TracTickets for help on using tickets.