Page MenuHomePhabricator

The cursor of New wikitext mode moves wrongly in Chinese Wikipedia.
Open, Needs TriagePublic

Description

Steps:

  1. Turn on "New wikitext mode" in preference
  2. Edit a page and paste some text
  3. move the cursor into a place and then type something

Expected:
The cursor should keep pace with the input.

Actual:
The cursor is slowly shifting to the left side.

Video Link: link
Tested in Chrome 81.0.4044.138 (Official Version) (64 bit) (cohort: Stable)

This is the cursor on Wikitext page on Wikipedia.

pasted_file (420×1 px, 52 KB)

However the input text will print on other line rather than in the same line.

pasted_file (484×1 px, 64 KB)

Event Timeline

Aklapper changed the task status from Open to Stalled.EditedMay 17 2020, 9:49 AM

Hi @Koala0090, thanks for taking the time to report this! Unfortunately this Wikimedia Phabricator task lacks some information.
If you have time and can still reproduce the situation: Please add a more complete description to this task. That should be

  • a clear list of exact steps to reproduce the situation, step by step, so that nobody needs to guess or interpret how you performed each step,
  • what happens after performing these steps to reproduce,
  • what you expected to happen instead,
  • a full link to a web address where the issue can be seen,
  • which web browser(s) and versions this has been tested with.

You can edit the task description by clicking Edit Task. Ideally, a good description should allow any other person to follow these steps (without having to interpret steps) and see the same results. Problems that others can reproduce can get fixed faster. We appreciate people who report issues, so thanks again!

Hamishcn changed the task status from Stalled to Open.May 17 2020, 10:04 AM
Hamishcn updated the task description. (Show Details)
Hamishcn added a subscriber: Hamishcn.
Hamishcn renamed this task from The cursor of Wikitext did not match up it should be in Chinese Wikipedia. to The cursor of New wikitext mode moves wrongly in Chinese Wikipedia..May 17 2020, 10:18 AM

@Koala0090: I am trying to replicate this phenomenon on zhwiki as well as on enwiki, but the cursor still follows the input and does not shift. I am using Chrome 83.0.4103.116 on macOS 10.15.5. If possible, please help retry this issue.

@VulpesVulpes825 Thanks for your reply.
It seems it works normally on English Wikipedia. However the proplem still remains on Chinese Wikipedia.

Test under:
Chrome: 83.0.4103.116, Windows 10

@Koala0090: I suspect this might be caused by one of the gadgets you used on zhwiki, as this issue does not exist on enwiki.

matmarex added a subscriber: matmarex.

This is probably caused by some interaction of a gadget on zh.wp with our syntax highlighting feature. Your example has just plain text, so it's hard to tell, but this bug seems very similar to issues we saw with syntax highlighting in the past on other wikis.

We are not planning to work on this soon, sorry.

You can toggle the syntax highlighting feature in the menu as seen below, it would be helpful if you could check whether the issue occurs when it's turned off:

image.png (2×3 px, 854 KB)
image.png (2×3 px, 766 KB)

I am pretty sure I meet the same problem on French Wikipedia. This is indeed fixed disabling Syntax highlighting.

This seems related to page size and line size. I mean: the offset between actual text-typing position and visible cursor position seems to be higher when you are near the end of a big line near the end of a big page, than near the start of a short line in top of a page.

pre, .mw-code, .mw-highlight {
    line-break: anywhere;
    white-space: pre-wrap;
    word-break: break-all;
}

MediaWiki:Common.css&oldid=69058327#L-1275
This rule (particularly the line-break attr) in the site css mainly contributes to this problem.

Change 745877 had a related patch set uploaded (by Func; author: Func):

[mediawiki/extensions/CodeMirror@master] Set the line-break attr to initial

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

Change 745877 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Set the line-break attr to initial

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

This rule (particularly the line-break attr) in the site css mainly contributes to this problem.

I noticed that this task was created before the css rules existed. So this task maybe shouldn't be closed.

Thanks for the patch.

I noticed that this task was created before the css rules existed. So this task maybe shouldn't be closed.

Thanks, I'll leave it open for now and wait for folks to confirm whether it works as expected or not.

The patch will be deployed to Chinese Wikipedia on Thursday, December 16, per the usual schedule (https://www.mediawiki.org/wiki/MediaWiki_1.38/Roadmap), so please test after that date.

I come out with a minimum repeatable case in my device, I load the edit page in safemode, so no site css or js can affect the output.

捕获.PNG (1×1 px, 308 KB)

Then I merge some content into one span but keep other spans empty, the appearance now consistent with edit textarea.

捕获1.PNG (741×1 px, 163 KB)

I can repeat this using Chrome 96.0.4664.45 in windows 10, but not Firefox 95.0 (it's totally fine with this paragraph).
So I think there may have something wrong when rendering, which can depend on browsers.