Page MenuHomePhabricator

Syntax highlighting causes blurry text in 2017 WikiEditor in Internet Explorer
Open, Needs TriagePublic

Description

Problem

I first enabled both 2017 WikiEditor and Syntax Highlighting features, both in still Beta mode.

I went to an article about letter "V" and then click "Edit" or "Edit source".

Then when I opened up the editing window (or "source"), some of the grey text appear at the back of the black text:

I highlighted one word and then dragged it into another place. Then I tried undoing the action (i.e. clicked "Undo"), but then the word won't go back to its original position:

I went out the source and then back in to start over. Then I highlighted the paragraph and then dragged it into another place. So many more grey text appear at the back of the black text. I tried undoing the action, but the source somehow got worse. The paragraph went back to its original position but then disappeared when I clicked on the source. Meanwhile, it stayed like this:

I started over again. Then I highlighted just one of template codes in one line and dragged it into another place. Then I clicked "Undo", but same results as dragging a paragraph. When I clicked on the source, the template code disappears. Meanwhile, it stayed like this:

It's worse when you put a template code into the middle of another template code, making the text red. Also, some other ghost-looking (i.e. grey) text appears, especially when trying to undo the action.


Expected behavior

There should be no overlapping text when CodeMirror syntax highlighting is enabled on the 2017 Wikitext editor on Internet Explorer.


See also

Event Timeline

gh87 created this task.Mar 26 2018, 8:27 PM
Restricted Application added a project: Community-Tech. · View Herald TranscriptMar 26 2018, 8:27 PM

Did you see any exceptions in the console while doing this (F12)?

gh87 added a comment.EditedMar 26 2018, 10:07 PM

I don't know any exceptions, and I'm unsure what F12 means as it links to some blue shield icon. However, I re-sampled both Beta features on IE11, and I found some things.

Grey/Ghost text can be highlighted and then dragged, not the ones in solid colors. However, if "Undo" action is made, once I click it again, the grey/ghost text disappears. Solid-color text can't still be highlighted (i.e. double-click for highlighting and dragging, another way to cut and paste content).

It can happen while dragging just one word, one line, and/or one paragraph. More screenshots below:

@gh87 Not a solution to this but cutting and pasting will likely work much better than dragging. You can use keyboard shortcuts Ctrl/Cmd+C and Ctrl/Cmd+V for doing this easily.

gh87 added a comment.Mar 26 2018, 11:13 PM

No, @Niharika . Performing Ctrl+C and Ctrl+V is also bad.

I enabled the gadget displaying error messages of javascript codes months ago, just in case.

This is the message I received when performing Ctrl+C:

Performing Ctrl+V after that results in pasting a copied content without breaking a sentence line, but then the line breaks after performing it twice:

I received two error messages when performing Ctrl+X (a shortcut to cut):

Also, Ctrl+X actions resulted in duplicates rather than cutting/removing and pasting.

In any case, after performing keyboard shortcuts, I clicked "Undo" numerous times, but the actions are not reversed. Instead, the content stays that way. But then I backspaced to delete the content; somehow, the page automatically shifts up, but it sometimes happens when doing any other action.

In one occasion, the ghost text appears:

I've resumed performing the dragging. However, dragging the highlighted content from the middle or bottom of the source page won't work. The '17 WikiEditor in syntax highlighting mode won't let a content move from one place to another when not at the top of the page.

gh87 added a comment.EditedMar 27 2018, 3:36 AM

Did you see any exceptions in the console while doing this (F12)?

I was unsure what "exceptions" are. Maybe I found what you consider "exceptions". At IE11, I went to Tools > Internet Options > Advanced, and then I enabled "Always record developer console messages". Then I selected "Never break on exceptions" at the Debugger tab.

I saw two error messages when I perform Ctrl+X:

I saw another message, one of them the same, when I perform Ctrl+C:

Then I selected "Always break on all exceptions" to see whether you meant the messages on the console or "exceptions" on the debugger. Whenever I go to any page, each script code is detected as an "exception". The debugger's pausing totally annoyed me every time an exception is found, especially when I selected to pause on "all exceptions".

Exceptions are found whenever I tried to load a page or go to a source page or anywhere else in a project. EDIT: Wait, exceptions, major and minor alike, are everywhere all over Internet (maybe elsewhere?).

Then I selected "break on unhandled exceptions" and found two in the debugger while performing Ctrl+X:

The left screenshot also occurs while performing Ctrl+C.

TheDJ added a subscriber: TheDJ.EditedMar 27 2018, 12:26 PM

I enabled the gadget displaying error messages of javascript codes months ago, just in case.
This is the message I received when performing Ctrl+C:

This JS error notification is by default installed on Commons, and indeed available as a gadget for those who want to use it on en.wp.

they show the same errors as you have found in the F12 console

And thank you for assisting, the information you listed will surely be very helpful for the developers.

gh87 added a comment.Mar 27 2018, 7:37 PM

Wait, I know what F12 means -- the developers tool. Hmm... I wonder whether typing {key F12} to result in F12 is worth our time. The other F12 is a link to some project icon.

@Esanders — will you have capacity to look at the overlapping text bug in IE11 on 2017 Wikitext editor?

There was nothing obvious causing it, the paragraphs are identical in size and font properties. In some cases, forcing re-render would change the wrapping of a word, so it is possible that in cases where the edge of the word is right at the end of the line, the rendering is just not deterministic enough for us to use this technique.

TBolliger renamed this task from Syntax highlighting mode makes editing in 2017 WikiEditor in Internet Explorer worse to Syntax highlighting causes blurry text in 2017 WikiEditor in Internet Explorer.Mar 28 2018, 4:28 PM
TBolliger updated the task description. (Show Details)

I tried this out on a loaner Thinkpad and one problem that I saw was that CodeMirror takes a while to refresh on 2017 Wikitext Editor which creates a momentary flash of blurry text and the cursor moves are visibly slower when a character is deleted.

We will wait until T184467: CodeMirror in 2017 Wikitext Editor shows overlapping text in Firefox has been closed before working on this task, as it may be the same fix.

Numbermaniac added a subscriber: Numbermaniac.EditedJul 21 2018, 7:14 AM

I've also had a blurry text rendering issue on macOS 10.13, in Firefox Developer Edition 61 and 62. Here's a screenshot where you can see it happening on the right edge of the editing field: https://i.imgur.com/nfVyqbN.png

I'm fairly sure it happened in stable Chrome as well.

gh87 added a comment.EditedJul 21 2018, 8:17 AM

@Numbermaniac The issue with using the features in IE11 is worse than in other browsers; other issue you raised should be separated as it looks minor (to me).

EDIT: Or maybe there's more to the issue than what the screenshot itself provides.

It should only be separated if the underlying cause is different, and that's something for the devs to figure out.

It looks to me like the blurry text in Numbermaniac's screenshot starts – but very slightly – in the middle of the line, and gets worse as it goes across the screen. (This observation makes me wonder if it would be the other way around in a right-to-left script.)