Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#28242 closed defect (bug) (fixed)

Unable to place caret inside editor in mobile safari

Reported by: rralian Owned by: azaozz
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.9.1
Component: TinyMCE Keywords:
Focuses: Cc:

Description (last modified by SergeyBiryukov)

Testing with an ipad air both with and without a bluetooth keyboard. This is somewhat intermittent, but if I test for long enough I can recreate this on all the up-to-date blogs I've tried (both .org and .com). The issue happens either when I try to tap on a particular spot in the post or when I long-tap and try to drag the caret to a particular spot in the post. I can sometimes position the cursor near the top of the post, but never within the last couple paragraphs in my post. So if I write a much longer post, I may be able to position the cursor within the first few paragraphs, but then beyond a certain point, the cursor cannot be placed past a certain line. If I try to position the cursor on a line below that, it will retain the horizontal position, but revert back up to that bottom limit line.

I've also tried recreating this issue at fiddle.tinymce.com using version 4.0.21 and I am *not* able to recreate the problem there. So it seems to have something to do with our implementation. I've tried removing our custom editor css to see if that solves the problem but it does not. So I would suspect it has to do with one of our plugins.

Attachments (1)

28242.patch (2.7 KB) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (8)

#1 @azaozz
6 years ago

  • Owner set to azaozz
  • Status changed from new to assigned

This seems dependent on the iframe body height. iOS doesn't scroll iframes, instead it expands them to 100% height. Seems the editor iframe's body is not expanded, or the height is not set properly making it impossible to place the caret.

#2 @SergeyBiryukov
6 years ago

  • Description modified (diff)
  • Summary changed from Unable to place carat inside editor in mobile safari to Unable to place caret inside editor in mobile safari

6 years ago

#3 @azaozz
6 years ago

  • Keywords needs-testing has-patch added
  • Milestone changed from Awaiting Review to 4.0

28242.patch sets the editor body height to 200% and removes setting the height on switching Visual to Text and back. Tested on iPad with iOS 7.1 and 5.1, needs testing on iPhone/iPod.

#4 @azaozz
6 years ago

In 28626:

TinyMCE in iOS:

  • Fix placing the caret at the bottom of longer posts when the keyboard is open.
  • Disable resizing on switching editors and on show/hide the kitchen sink row.

See #28242

This ticket was mentioned in IRC in #wordpress-dev by DrewAPicture. View the logs.

6 years ago

#6 @DrewAPicture
6 years ago

@azaozz: What's left here?

#7 @markjaquith
6 years ago

  • Keywords needs-testing has-patch removed
  • Resolution set to fixed
  • Status changed from assigned to closed

azaozz says he thinks this should be good. Re-open if there are further problems with this.

Note: See TracTickets for help on using tickets.