Page MenuHomePhabricator

Syntax highlighting causes blurry text in 2017 WikiEditor in Internet Explorer
Closed, InvalidPublic

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:

2017 WikiEditor in IE11 with syntax highlighting mode (B).PNG (283×1 px, 51 KB)

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:

2017 WikiEditor in IE11 with syntax highlighting mode (A).PNG (188×303 px, 9 KB)

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:

2017 WikiEditor in IE11 with syntax highlighting mode (C).PNG (903×1 px, 250 KB)

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:

2017 WikiEditor in IE11 with syntax highlighting mode (E).PNG (861×1 px, 221 KB)

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.

2017 WikiEditor in IE11 with syntax highlighting mode (D).PNG (862×1 px, 224 KB)


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

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

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:

2017 WikiEditor in IE11 with syntax highlighting mode (h).PNG (176×210 px, 7 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (j).PNG (245×158 px, 9 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (f).PNG (402×1 px, 115 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (g).PNG (437×1 px, 121 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (i).PNG (857×1 px, 258 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (k).PNG (867×1 px, 224 KB)

@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.

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:

2017 WikiEditor in IE11 with syntax highlighting mode (p).PNG (107×282 px, 3 KB)

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:
2017 WikiEditor in IE11 with syntax highlighting mode (t).PNG (223×711 px, 8 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (v).PNG (256×544 px, 9 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (u).PNG (270×508 px, 11 KB)

I received two error messages when performing Ctrl+X (a shortcut to cut):
2017 WikiEditor in IE11 with syntax highlighting mode (m).PNG (371×305 px, 18 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (q).PNG (656×1 px, 49 KB)

Also, Ctrl+X actions resulted in duplicates rather than cutting/removing and pasting.
2017 WikiEditor in IE11 with syntax highlighting mode (o).PNG (222×396 px, 6 KB) 2017 WikiEditor in IE11 with syntax highlighting mode (l).PNG (228×403 px, 7 KB)

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:

2017 WikiEditor in IE11 with syntax highlighting mode (n).PNG (636×1 px, 39 KB)

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.

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:

2017 WikiEditor in IE11 Developers Tool (d).PNG (815×1 px, 127 KB)

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

2017 WikiEditor in IE11 Developers Tool (e).PNG (525×1 px, 37 KB)

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:
2017 WikiEditor in IE11 Developers Tool (i).PNG (563×1 px, 97 KB) 2017 WikiEditor in IE11 Developers Tool (j).PNG (527×1 px, 98 KB)

The left screenshot also occurs while performing Ctrl+C.

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:

2017 WikiEditor in IE11 with syntax highlighting mode (p).PNG (107×282 px, 3 KB)

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.

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.

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.

@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.)

I wonder if we could add a "fail-closed" check so that any detected misalignments cause CodeMirror to turn itself off.

matmarex subscribed.

IE11 is no longer supported by MediaWiki.