Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 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 10 years ago.

Download all attachments as: .zip

Change History (16)

#1 @iseulde
10 years ago

  • Description modified (diff)

#2 @iseulde
10 years ago

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

#3 @iseulde
10 years ago

Reported this directly upstream.

#4 @iseulde
10 years ago

#31536 was marked as a duplicate.

#5 @iseulde
10 years ago

Also happens in IE as described in the ticket above.

@iseulde
10 years ago

#6 @iseulde
10 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.


10 years ago

#8 @ryan
10 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 10 years ago by ryan (previous) (diff)

#9 @iseulde
10 years ago

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

Introduced in [29458].

#10 @ryan
10 years ago

  • Keywords make-flow added

#11 @iseulde
10 years ago

  • Milestone changed from Future Release to 4.3
  • Resolution set to fixed
  • Status changed from new to closed
Last edited 10 years ago by iseulde (previous) (diff)

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


10 years ago

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


10 years ago

#15 @ryan
10 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.