Page MenuHomePhabricator

CodeMirror in 2017 Wikitext Editor shows overlapping text in Firefox
Closed, ResolvedPublic2 Estimated Story Points


This was reported on the CodeMirror talk page:

Highlight cannot display correctly just above where I put in. I edited the CSS to show the problem. System: Linux Deepin 15.5 Browser: Firefox Quantom 57.0

chinese syntax highlighting.png (1×1 px, 340 KB)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Thanks @Aschmidt. Pinging @Esanders given -

It first showed up right after T175223 was implemented.

I wonder if this was caused by the fix for T175223.

Actually, I think this was caused by 29f6b48eebc0 (turning off inputStyle: enableContentEditable in Firefox). It seems we did that in order to disable CodeMirror's spellchecking, but the way we disabled it is probably overkill. We could actually just disable the spellchecking specifically and not all of contentEditable. Something like...

inputStyle: 'contenteditable',
spellcheck: enableSpellcheck,

in ext.CodeMirror.js. Let's try that before we mess with ve.ui.CodeMirrorAction.js.

kaldari triaged this task as Medium priority.Feb 9 2018, 4:38 PM
kaldari added a project: Community-Tech-Sprint.
kaldari set the point value for this task to 1.

After doing some archeology, it looks like we actually turned off contenteditable in Firefox to deal with @Fomafix's keyboard shortcut bug (T95104#3634230). Considering all the Firefox-specific CodeMirror problems we now have, I'm beginning to think that Fomafix's bug might be worth breaking again in order to turn back on contenteditable in Firefox. Hopefully, we could find a better way to deal with Fomafix's bug (although it seems to actually be a browser bug as there is no JS involved).

Interestingly, it looks like the blurry text may actually be two different bugs. In OSX Firefox in the new WikiText editor, it's probably caused by, and in Windows and Linux Firefox, it's probably caused by, both of which are related to T95104. Needs some further investigation to confirm this hypothesis.

TBolliger renamed this task from CodeMirror for Chinese in New Wikitext Editor shows blurry image to CodeMirror for Chinese in 2017 Wikitext Editor shows blurry image in Firefox.Feb 9 2018, 11:10 PM

Because of the recent renaming of this task by @TBolliger I'd like to point out once again that this is not only an issue concerning Chinese text, but also latin scripts and fonts.

I suggest you rename this task respectively. – Thanks!

TBolliger renamed this task from CodeMirror for Chinese in 2017 Wikitext Editor shows blurry image in Firefox to CodeMirror in 2017 Wikitext Editor shows blurry image in Firefox.Feb 9 2018, 11:31 PM
kaldari renamed this task from CodeMirror in 2017 Wikitext Editor shows blurry image in Firefox to CodeMirror in 2017 Wikitext Editor shows overlapping text in Firefox.Feb 10 2018, 5:50 AM

We'll resize this in today's kickoff.

Niharika set the point value for this task to 2.Feb 14 2018, 12:54 AM

Screenshot-2018-2-23 正在編輯 綠靴子 - 維基百科,自由的百科全書.png (683×1 px, 205 KB)

There is a similar problem. the highlight lines cannot fits the actual position (Windows 10 64-bit, Firefox 58.0.2).

@Taiwania_Justo: Thanks. Could you please file a separate task and provide steps to reproduce, system information, a link to see the problem?

Similar issue was here T176073, which is still happening.

Part of the issue is that bold tags change the glyph width of Chinese characters in Firefox, so we will have to disable bold in VE.

Change 417016 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/CodeMirror@master] Avoid using bold with VE+CodeMirror

@Esanders - The other two WYSIWYG features in CodeMirror are italic and headers. We should check both of those as well.

Change 417016 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Avoid using bold with VE+CodeMirror

Hi @Esanders — Any update on this? It appears to have gone out with wmf/1.31.0-wmf.25, can this ticket be closed?

I'm afraid it is even worse than it was before. Text now looks blurred etc. even immediately after switching on syntax highlighting on my system (same as above, now FF 52.7.2 ESR). When we started out the effect appeared only when you began to enter some text in the editor...

Here is an example of what it looks like with me.

Here is an example of what it looks like with me.

Given that you have grey text version, you must be using Firefox on OSX. I can't reproduce your screenshot using the same article and browser+OS. Can you check again tomorrow after the next release?

Yes, I run FF ESR 52.7.3 on El Capitan, and given that the release is already there tonight (is it?), I'm sorry to say that nothing has changed. :(

blurry-fonts Kopie.png (72×880 px, 23 KB)

I am able to reproduce this defect on macOS 10.13.4 High Sierra on Firefox Quantum 59.0.2 (64-bit) on NWE build Version 5b36d88 2018-03-27T17:24:58Z on article

It's not as bad as Aschmidt's screenshot, but here is what I am seeing:

Screen Shot 2018-04-04 at 2.16.54 PM.png (353×1 px, 132 KB)

This particularly seems to affect italicized words (e.g. adipiscing) and the closing </div>.

Thanks for testing, @TBolliger ! Meanwhile I have upgraded to Firefox 59.0.2, still on El Capitan, and it still looks as bad as it was before on my machine:

lorem-ipsum-screenshot-180404 Kopie.png (456×879 px, 283 KB)

I've tested with FF 59.0 and OSX 10.11 (El Capitan) and everything looks perfect on the linked page.

@TBollinger your screenshot looks fine apart from the green </div> tag, could be something do with sub-pixel anti-aliasing, in which case there isn't much that can be done..

@Aschmidt it looks like the top surface has word breaks enabled. This shouldn't be the default behaviour, but maybe a user script or browser plugin is changing this. Is it still broken with a clean browser profile and/or new user account? If it is a user override then might help.

@Esanders I have restarted Firefox on El Capitan with a fresh profile, and I have switched off auto hypenation on Meta Wiki. No changes, I'm afraid. :( Strange that it seems to work for you... Again, thanks for looking into this!

screenshot-180411 Kopie.jpg (394×1 px, 70 KB)

238482n375 lowered the priority of this task from Medium to Lowest.
238482n375 moved this task from Next Up to In Code Review on the Analytics-Kanban board.
238482n375 edited subscribers, added: 238482n375; removed: Aklapper.


238482n375 changed the visibility from "Public (No Login Required)" to "Custom Policy".