Problems with popups & iframe-based rich text-editors by Real McCoy

When the textarea is rendered in IE10, the undo and redo work unreliably. Same happens in rich text-editor. IE10 fixed this issue to 'some' extent. For example, using IE10 type some text in any MSDN-IEBLOG post and press Ctrl+Z and then type more and press Ctrl+Y. Test different scenarios with undo/redo there for some time. Try the same in IE10, then FF, Chrome or any non-IE browser and observe the difference in their behavior.


BUT when the iFrame-based-DHTML-rich-text editor is rendered in a popup, forget about little glitches like undo and redo, be it IE10 or IE10, it will break down and sabotages the whole experience and make it nearly impossible to work with. I will give you TWO examples (plus one for Windows Phone's IE10):



1- EditArea - an open-source JavaScript library for code editing (http://www.cdolivet.com/editarea/)
This library is used in the admin panel of CS-Cart (a business application: shopping cart solution) and many others RIAs to edit the source file.

PFA - 2 files.

Using IE10 browser (in Windows 7 and Windows 8) -- both with standard modes.

Open the Full Example link (http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html) ...and wait until the script loads completely. If the page freezes, recover the page and try again (that's what happened to me on IE10, Windows 8). Once the rich colored code is displayed, try to scroll up/down and click on some code and try to edit it. You will see the reflection of text and some weird things happening like caret automagically changing its position while selecting the text once you click on the code. There is NO way to edit the text successfully.

Furthermore, it seems impossible to get the selection range when wrap mode is "soft" (and it's still very difficult when wrap mode is on)

Finally, the syntax highlight mode is broken when text length is too long (~100000, 150000 chars) don't know why...

Also, test the demo in IE10 in Windows 7 and Windows Phone to have the same or even worse experience. Then try it in FF, Chrome or any other non-IE browser to see the correct behavior.




2- Microsoft Windows Team Blog (blogs.windows.com):
Using IE10 browser (in Windows 7 and Windows 8) -- both with standard modes.


Suppose you have added Rodney as a friend on Windows Team blog network. Navigate to his profile page (http://windowsteamblog.com/members/rodneyej/), under his picture, click the Start conversation link, the send-message popup appears with a rich-text-editor.
Now, enter some text in subject and message. Click back and forth in Subject and message field. You will see the text-editor will stop getting focus. Refresh the page, and click Start conversation again. This time, try to send the message: type some text and click on start conversation. Once you submit the form, the conversation is started, click on Conversations on the top-right of the page and open the latest conversation you initiated. You will find out the message body is empty. You have to type the message again. Since the conversation was started, the text-editor for the second message would be loaded inline in the document, and only then you can send the message successfully. The first message will always go empty in IE10 !!

To see more miracles, try to send same message using WindowsPhone IE10. (which is literally impossible).


3 - ATT link in Windows Phone's Settings > About
Using IE10 in Windows Phone 7.5 -- desktop and mobile versions.


Speaking of Windows Phone IE10 and popup. I have an AT&T device. When I tap on Settings > About and tap the link under 'help contacts' (http://www.att.com/devicesupport), the page loads with a popup to select your device. You will find the popup experience is pretty much cluttered. If this is the situation with the device's carrier support homepage (the one present in phone's About screen), what can we expect from other RIAs? The same page works fine in iPhone, Android and even Symbian.


There is lot of fuzziness when it comes to the behavior of IE with iframe-based rich-text editors and popups. Sometimes the layout is broken, sometimes the whole experience is cluttered, sometimes popup content is flickering/dancing with mouse/swipe movement, on WP sometimes popup is running away from you (you swipe down to see the popup and it will keeps running away downward) and since so forth. The text-editor developers still have to use 'hacks' to support even IE10. Compare it with FF and Chrome and having no-compromise approach, 'Nip the evil in the Bud' once forever!


Thank you for listening