CODEWITHSUNDEEP
javascriptmobilemeteor
below9k
below9k

Reputation: 156

Virtual Keyboard/Scrolling Strange Events

See what had happened was:

I'm using this new lib from Ephox (makers of TinyMCE) Textboxio. I switched to it after having issues with most others (if this post falls through, I'm writing my own.) It's an html5 wysiwyg editor. The mobile version option is what is giving me issues. It has a cool full-screen editor for ease-of-use on mobile but->

Problems: iOS - When soft keyboard is open everything works great. After the keyboard is closed and the page panned and/or zoomed font size in the editor increases roughly 2x maybe 1.5x. Pinch zooming closes the window also - this is the worst part [Narrowed to just zoom-out or when both fingers are brought together, zoom-in seems to have no effect].

Android - This may be an actual bug. My fixed top bar is not being found when the full-screen feature parses the page. Presently working on this.

My demo sucks: http://below9k.info:8080/tbio_test

Their demo works fine. http://ephox.com/textbox.io at the bottom.

A way to debug on iOS is what I need :(

[EDIT for Betterness]

Upvotes: 1

Views: 327

Answers (1)

Harrypotter2k5
Harrypotter2k5

Reputation: 256

Textbox.io developer here.

Regarding elements are not where they render to appear, it looks like you've attempted to manually override .ephox-polish-fullscreen-maximized to include a margin so that your top nav bar appears at all times. For mobile, we've deliberately taken up the fullscreen by design, and unfortunately there's a heap of calculations we perform to keep content in the editable view area on iOS. The addition of your margin offsets this and makes what appears to be interesting behavior.

With the font size issue, the cursor will assume the same line height as the image before it. In this case, its a big image, so it does look a little funky. There's plans to fix this in future releases, but you'll tend to find similar issues on the other mainstream editors as well. You'll notice that hitting enter after the image, your cursor size will be back to normal.

Finally, I noticed that you've set content to something that isn't wrapped in a block tag. This actually raised a bug in the editor from our end, which causes things to act funny for enter key behavior. Sorry about that - We'll have this fixed soon. For the time being, however, if you wrap the content you're setting in <p> and </p> you should find some better behavior.

Upvotes: 1

Related Questions