Page MenuHomePhabricator

Different widths in NWE+CodeMirror can cause text and color to fall out of sync
Open, Needs TriagePublic

Description

See screenshots:


The invisible text has width 1010px (first screenshot), while the syntaxhighlight has 1041.2px (second screenshot), so in the text the word "sein" wraps to the next line, while it is still visible in the first, causing everything that follows to fall out of sync, e.g. the cursor was at the end of the bluish area in the first screenshot while it should have been at the end of what's visible in the second screenshot.

This is probably caused by the chimera element (visible in first screenshot) at the start of the line, which has (at least in Firefox) a width of 2px.

Full text (if you want to try to reproduce, together with window.innerWidth === 1280):

== [[ETCS Stop Marker]] ==

ist keine Person --[[Benutzer:Eingangskontrolle|Eingangskontrolle]] ([[Benutzer Diskussion:Eingangskontrolle|Diskussion]]) 12:40, 5. Sep. 2018 (CEST)
:Falls du irgendeine nützliche Information übermitteln wolltest, ist sie bei mir nicht angekommen. Falls es ein Fehlerbericht sein sollte,

I have no real idea why the widths are not only different, but also differ that much, but it could be something with a scrollbar:
Toggling overflow: auto !important; on .ve-init-mw-desktopArticleTarget .CodeMirror-scroll does fix the issue, but causes a similar one in the line above instead.

Event Timeline

Schnark created this task.Sep 6 2018, 7:36 AM
Restricted Application added projects: VisualEditor, Community-Tech. · View Herald TranscriptSep 6 2018, 7:36 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

The invisible text has width 1010px (first screenshot), while the syntaxhighlight has 1041.2px (second screenshot), so in the text the word "sein" wraps to the next line, (…)
I have no real idea why the widths are not only different, but also differ that much (…)

I think the cause and effect are opposite here. The word "sein" wraps to the next line, for some reason, and that's why the calculated widths are so different (the difference is presumably the width of the word plus a space).

The real question is, what is causing that line to wrap in one but not the other?

I can't reproduce this locally. At 1280px both real and CodeMirror surface wrap the word, and at 1281px they both not wrap it. :/

I can reproduce, but not reliably, and not easily:

  1. Make sure your innerWidth is 1280px.
  2. Go to https://de.wikipedia.org/w/index.php?title=Benutzer_Diskussion:Schnark/js/personendaten.js&oldid=180650550&veaction=editsource&section=19
  3. Type in
:Falls du irgendeine nützliche Information übermitteln wolltest, ist sie bei mir nicht angekommen. Falls es ein Fehlerbericht sein

You have to type, do not simply copy and paste it. Even pasting the first part and typing the second doesn't seem to reproduce the issue.

But when I actually type the text in, the line wrapping usually differs at some point.

I can reproduce even with step 2 replaced by "Edit with section=new", and I think I found the culprit:
The line starts with <img class="ve-ce-chimera ve-ce-chimera-gecko" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">, which due to

.ve-ce-chimera-gecko {
    border: 1px solid transparent;
}

has a width of 2px. causing a little shift.

Schnark updated the task description. (Show Details)Sep 20 2018, 7:42 AM
Esanders moved this task from To Triage to Q4 on the VisualEditor board.Oct 3 2018, 2:58 PM
Esanders added a subscriber: Esanders.

@dchan Given that source documents never have annotations, can we just not render inline slugs?

JTannerWMF moved this task from Q4 to Current work on the VisualEditor board.Oct 3 2018, 4:57 PM
JTannerWMF edited projects, added VisualEditor (Current work); removed VisualEditor.
JTannerWMF moved this task from Current work to Needs Discussion/Analysis on the VisualEditor board.
JTannerWMF edited projects, added VisualEditor; removed VisualEditor (Current work).
JTannerWMF moved this task from To Triage to Freezer on the VisualEditor board.Mar 27 2019, 6:29 PM