Page MenuHomePhabricator

The first letter is cut off when using the 2017 wikitext editor with the timeless skin
Open, Needs TriagePublic

Description

The first character of every line is cut off when using the 2017 wikitext editor with the timeless skin.

Browsers affected

  • Vivaldi (built on Chromium) for Windows 10
  • Microsoft Edge for Windows 10
  • Firefox Quantum for Android

Browsers not affected

  • Firefox for Windows 10
  • Internet Explorer for Windows 10

Event Timeline

Daylen created this task.Sep 21 2018, 8:04 PM
Restricted Application added a project: VisualEditor. · View Herald TranscriptSep 21 2018, 8:04 PM
Izno added a subscriber: Izno.Sep 21 2018, 8:05 PM

This happens to me on Android Firefox Quantum. Is that what you're using here?

Framawiki moved this task from Backlog to Compatibility on the Timeless board.Sep 21 2018, 8:07 PM

@Izno I'm using Vivaldi (which is built on Chromium). I've also tried it on Microsoft Edge and get the same issue. It doesn't seem to be a browser-specific problem.

Izno added a comment.Sep 21 2018, 11:50 PM

@Izno I'm using Vivaldi (which is built on Chromium). I've also tried it on Microsoft Edge and get the same issue. It doesn't seem to be a browser-specific problem.

I cannot produce the problem in Firefox 62.0 64-bit on Windows 10. (As noted before, I can with every edit on Firefox Quantum on Android.)

I cannot produce the problem in Firefox 62.0 64-bit on Windows 10. (As noted before, I can with every edit on Firefox Quantum on Android.)

I downloaded the newest version of Firefox for Windows 10 and can confirm that it does not have this issue. I'm wondering what would be causing it? Do you know if Firefox for Android is built on Chrome? I also gave Internet Explorer a try and the text displays fine. I'm going to start updating the task description with browsers that have and don't have the issue. Thanks for testing the different browsers!

Daylen updated the task description. (Show Details)Sep 23 2018, 5:41 AM

Timeless is not an officially supported skin, but community patches are welcome.

I can't reproduce using Opera 56 (Chromium 69) on Windows 10.

I can't reproduce using Opera 56 (Chromium 69) on Windows 10.

Vivaldi uses Chromium 64.0.3282.189 (32-bit). However, I'm also having the issue with Microsoft Edge (but not Internet Explorer). I think it might have something to do with the Blink engine.

Edge also works correctly for me. Maybe it's caused by some gadget or preference you have enabled?

Edge
Opera
Izno added a comment.Sep 28 2018, 1:32 PM

Edge also works correctly for me. Maybe it's caused by some gadget or preference you have enabled?

I was able to reproduce on Edge on Windows 10 at probably around a 40% width on a 1920 screen so ~ 800px, matching my experience on Firefox for Android.

And now also Firefox for Windows 10 at the same width after checking there now.

Clearly a responsive design issue. :)

I still can't reproduce this, fiddling with various browser window sizes. However, I can reproduce something slightly similar:

At this exact window size, in Edge only, I get a horizontal scrollbar that seems to be cut off and can't be clicked. But I can programatically scroll the .CodeMirror-scroll element by 1px, and when I do, I get a similar effect of the first character of the line being cut off.

I suspect both problems are related to these overrides:

resources/modules/ve-cm/ve.ui.CodeMirror.init.less
	.CodeMirror-scroll {
		margin-right: 0;
		overflow: auto !important; /* stylelint-disable-line declaration-no-important */
	}

	.CodeMirror-sizer {
		border-right: 0;
	}

Removing these rules fixes the scrolling issue for me, but causes some other unclickable scrollbars to appear:

I'll note that CodeMirror code clearly says we shouldn't do this:

resources/lib/codemirror/lib/codemirror.css
.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */

@matmarex Now the text isn't going off the screen, but the cursor isn't aligned. Screen capture from Microsoft Edge. The problem is typically caused by turning syntax highlighting from off to on in the middle of an edit.

This also happened to me on Chrome v73 (on Ubuntu).

JTannerWMF moved this task from To Triage to Freezer on the VisualEditor board.Feb 26 2019, 5:07 PM