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

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

In T205149#4607202, @Daylen wrote:

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

In T205149#4607538, @Izno wrote:

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!

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

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

In T205149#4623429, @matmarex wrote:

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

In T205149#4624791, @matmarex wrote:

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:

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

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

Change 531306 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Fix a bunch of VE alignment issues

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

Change 531306 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Fix a bunch of VE alignment issues

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