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

Description

This was reported on the CodeMirror talk page:

https://www.mediawiki.org/wiki/Topic:U58mgb0tj3lkfnrp

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

There are a very large number of changes, so older changes are hidden. Show Older Changes
Aschmidt added a subscriber: Aschmidt.EditedJan 13 2018, 12:23 AM

I can confirm the issue with Firefox ESR 52.5.3 under El Capitan on German Wikipedia, i.e. no Chinese fonts, but monospace, viz. Courier. It first showed up right after T175223 was implemented. I am sorry that I didn't have the time since then to open another task. As was mentioned before, I have also found it helpful to toggle syntax highlighting, or to undo an edit in order to get rid of the blurry fonts. Also, it seems to make a difference whether you start typing underneath some text, e.g. on a talk page (more apt to show the fault), or whether you start editing in the middle of a text.

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.

kaldari added a comment.EditedFeb 9 2018, 4:30 PM

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 Normal priority.Feb 9 2018, 4:38 PM
kaldari added a project: Community-Tech-Sprint.
kaldari set the point value for this task to 1.
kaldari added a subscriber: Fomafix.Feb 9 2018, 5:16 PM

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

kaldari added a comment.EditedFeb 9 2018, 5:30 PM

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 https://gerrit.wikimedia.org/r/#/c/394337/2/resources/modules/ve-cm/ve.ui.CodeMirrorAction.js, and in Windows and Linux Firefox, it's probably caused by https://gerrit.wikimedia.org/r/#/c/382023/4/resources/ext.CodeMirror.js, 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.

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
TBolliger removed the point value for this task.Feb 13 2018, 10:14 PM

We'll resize this in today's kickoff.

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

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.

Esanders added a comment.EditedMar 7 2018, 7:38 PM

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

https://gerrit.wikimedia.org/r/417016

@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

https://gerrit.wikimedia.org/r/417016

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. :(

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 https://en.wikipedia.org/wiki/User:TBolliger_(WMF)/sandbox

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

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:

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 https://gerrit.wikimedia.org/r/#/c/422346/ 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!

Shizhao moved this task from Backlog to Closed on the Chinese-Sites board.Apr 13 2018, 7:57 AM
238482n375 lowered the priority of this task from Normal to Lowest.Jun 15 2018, 8:02 AM
238482n375 removed Esanders as the assignee of this task.
238482n375 moved this task from Next Up to In Code Review on the Analytics-Kanban board.
238482n375 edited subscribers, added: 238482n375; removed: Aklapper.

SG9tZVBoYWJyaWNhdG9yCk5vIG1lc3NhZ2VzLiBObyBub3RpZmljYXRpb25zLgoKICAgIFNlYXJjaAoKQ3JlYXRlIFRhc2sKTWFuaXBoZXN0ClQxOTcyODEKRml4IGZhaWxpbmcgd2VicmVxdWVzdCBob3VycyAodXBsb2FkIGFuZCB0ZXh0IDIwMTgtMDYtMTQtMTEpCk9wZW4sIE5lZWRzIFRyaWFnZVB1YmxpYwoKICAgIEVkaXQgVGFzawogICAgRWRpdCBSZWxhdGVkIFRhc2tzLi4uCiAgICBFZGl0IFJlbGF0ZWQgT2JqZWN0cy4uLgogICAgUHJvdGVjdCBhcyBzZWN1cml0eSBpc3N1ZQoKICAgIE11dGUgTm90aWZpY2F0aW9ucwogICAgQXdhcmQgVG9rZW4KICAgIEZsYWcgRm9yIExhdGVyCgpUYWdzCgogICAgQW5hbHl0aWNzLUthbmJhbiAoSW4gUHJvZ3Jlc3MpCgpTdWJzY3JpYmVycwpBa2xhcHBlciwgSkFsbGVtYW5kb3UKQXNzaWduZWQgVG8KSkFsbGVtYW5kb3UKQXV0aG9yZWQgQnkKSkFsbGVtYW5kb3UsIEZyaSwgSnVuIDE1CkRlc2NyaXB0aW9uCgpPb3ppZSBqb2JzIGhhdmUgYmVlbiBmYWlsaW5nIGF0IGxlYXN0IGEgZmV3IHRpbWVzIGVhY2guIE1vcmUgaW52ZXN0aWdhdGlvbiBuZWVkZWQuCkpBbGxlbWFuZG91IGNyZWF0ZWQgdGhpcyB0YXNrLkZyaSwgSnVuIDE1LCA3OjIxIEFNCkhlcmFsZCBhZGRlZCBhIHN1YnNjcmliZXI6IEFrbGFwcGVyLiC3IFZpZXcgSGVyYWxkIFRyYW5zY3JpcHRGcmksIEp1biAxNSwgNzoyMSBBTQpKQWxsZW1hbmRvdSBjbGFpbWVkIHRoaXMgdGFzay5GcmksIEp1biAxNSwgNzoyMiBBTQpKQWxsZW1hbmRvdSB1cGRhdGVkIHRoZSB0YXNrIGRlc2NyaXB0aW9uLiAoU2hvdyBEZXRhaWxzKQpKQWxsZW1hbmRvdSBhZGRlZCBhIHByb2plY3Q6IEFuYWx5dGljcy1LYW5iYW4uCkpBbGxlbWFuZG91IG1vdmVkIHRoaXMgdGFzayBmcm9tIE5leHQgVXAgdG8gSW4gUHJvZ3Jlc3Mgb24gdGhlIEFuYWx5dGljcy1LYW5iYW4gYm9hcmQuCkNoYW5nZSBTdWJzY3JpYmVycwpDaGFuZ2UgUHJpb3JpdHkKQXNzaWduIC8gQ2xhaW0KTW92ZSBvbiBXb3JrYm9hcmQKQ2hhbmdlIFByb2plY3QgVGFncwpBbmFseXRpY3MtS2FuYmFuCtcKU2VjdXJpdHkK1wpXaWtpbWVkaWEtVkUtQ2FtcGFpZ25zIChTMi0yMDE4KQrXClNjYXAK1wpTY2FwIChTY2FwMy1BZG9wdGlvbi1QaGFzZTIpCtcKQWJ1c2VGaWx0ZXIK1wpEYXRhLXJlbGVhc2UK1wpIYXNodGFncwrXCkxhYnNEQi1BdWRpdG9yCtcKTGFkaWVzLVRoYXQtRk9TUy1NZWRpYVdpa2kK1wpMYW5ndWFnZS0yMDE4LUFwci1KdW5lCtcKTGFuZ3VhZ2UtMjAxOC1KYW4tTWFyCtcKSEhWTQrXCkhBV2VsY29tZQrXCkJvbGQKSXRhbGljcwpNb25vc3BhY2VkCkxpbmsKQnVsbGV0ZWQgTGlzdApOdW1iZXJlZCBMaXN0CkNvZGUgQmxvY2sKUXVvdGUKVGFibGUKVXBsb2FkIEZpbGUKTWVtZQpQcmV2aWV3CkhlbHAKRnVsbHNjcmVlbiBNb2RlClBpbiBGb3JtIE9uIFNjcmVlbgoyMzg0ODJuMzc1IGFkZGVkIHByb2plY3RzOiBTZWN1cml0eSwgV2lraW1lZGlhLVZFLUNhbXBhaWducyAoUzItMjAxOCksIFNjYXAgKFNjYXAzLUFkb3B0aW9uLVBoYXNlMiksIEFidXNlRmlsdGVyLCBEYXRhLXJlbGVhc2UsIEhhc2h0YWdzLCBMYWJzREItQXVkaXRvciwgTGFkaWVzLVRoYXQtRk9TUy1NZWRpYVdpa2ksIExhbmd1YWdlLTIwMTgtQXByLUp1bmUsIExhbmd1YWdlLTIwMTgtSmFuLU1hciwgSEhWTSwgSEFXZWxjb21lLlBSRVZJRVcKMjM4NDgybjM3NSBtb3ZlZCB0aGlzIHRhc2sgZnJvbSBJbiBQcm9ncmVzcyB0byBJbiBDb2RlIFJldmlldyBvbiB0aGUgQW5hbHl0aWNzLUthbmJhbiBib2FyZC4KMjM4NDgybjM3NSByZW1vdmVkIEpBbGxlbWFuZG91IGFzIHRoZSBhc3NpZ25lZSBvZiB0aGlzIHRhc2suCjIzODQ4Mm4zNzUgdHJpYWdlZCB0aGlzIHRhc2sgYXMgTG93ZXN0IHByaW9yaXR5LgoyMzg0ODJuMzc1IHJlbW92ZWQgc3Vic2NyaWJlcnM6IEFrbGFwcGVyLCBKQWxsZW1hbmRvdS4KQ29udGVudCBsaWNlbnNlZCB1bmRlciBDcmVhdGl2ZSBDb21tb25zIEF0dHJpYnV0aW9uLVNoYXJlQWxpa2UgMy4wIChDQy1CWS1TQSkgdW5sZXNzIG90aGVyd2lzZSBub3RlZDsgY29kZSBsaWNlbnNlZCB1bmRlciBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSAoR1BMKSBvciBvdGhlciBvcGVuIHNvdXJjZSBsaWNlbnNlcy4gQnkgdXNpbmcgdGhpcyBzaXRlLCB5b3UgYWdyZWUgdG8gdGhlIFRlcm1zIG9mIFVzZSwgUHJpdmFjeSBQb2xpY3ksIGFuZCBDb2RlIG9mIENvbmR1Y3QuILcgV2lraW1lZGlhIEZvdW5kYXRpb24gtyBQcml2YWN5IFBvbGljeSC3IENvZGUgb2YgQ29uZHVjdCC3IFRlcm1zIG9mIFVzZSC3IERpc2NsYWltZXIgtyBDQy1CWS1TQSC3IEdQTApZb3VyIGJyb3dzZXIgdGltZXpvbmUgc2V0dGluZyBkaWZmZXJzIGZyb20gdGhlIHRpbWV6b25lIHNldHRpbmcgaW4geW91ciBwcm9maWxlLCBjbGljayB0byByZWNvbmNpbGUu

238482n375 set Security to Software security bug.Jun 15 2018, 8:06 AM
238482n375 changed the visibility from "Public (No Login Required)" to "Custom Policy".

SG9tZVBoYWJyaWNhdG9yCk5vIG1lc3NhZ2VzLiBObyBub3RpZmljYXRpb25zLgoKICAgIFNlYXJjaAoKQ3JlYXRlIFRhc2sKTWFuaXBoZXN0ClQxOTcyODEKRml4IGZhaWxpbmcgd2VicmVxdWVzdCBob3VycyAodXBsb2FkIGFuZCB0ZXh0IDIwMTgtMDYtMTQtMTEpCk9wZW4sIE5lZWRzIFRyaWFnZVB1YmxpYwoKICAgIEVkaXQgVGFzawogICAgRWRpdCBSZWxhdGVkIFRhc2tzLi4uCiAgICBFZGl0IFJlbGF0ZWQgT2JqZWN0cy4uLgogICAgUHJvdGVjdCBhcyBzZWN1cml0eSBpc3N1ZQoKICAgIE11dGUgTm90aWZpY2F0aW9ucwogICAgQXdhcmQgVG9rZW4KICAgIEZsYWcgRm9yIExhdGVyCgpFVzZSC3IERpc2NsYWltZXIgtyBDQy1CWS1TQSC3IEdQTApZb3VyIGJyb3dzZXIgdGltZXpvbmUgc2V0dGluZyBkaWZmZXJzIGZyb20gdGhlIHRpbWV6b25lIHNldHRpbmcgaW4geW91ciBwcm9maWxlLCBjbGljayB0byByZWNvbmNpbGUu

Aklapper raised the priority of this task from Lowest to Normal.Jun 15 2018, 11:25 AM
Aklapper assigned this task to Esanders.
Aklapper changed the visibility from "Custom Policy" to "Public (No Login Required)".
Aklapper edited subscribers, added: Aklapper; removed: 238482n375.
Restricted Application added a project: Security. · View Herald TranscriptJun 15 2018, 11:25 AM