Page MenuHomePhabricator

When creating a "New section", the text for the body is not properly aligned with the rest of the page
Closed, ResolvedPublic

Description

When you open a "new section", the body of the message is too far to the left by most of one character width.

Seen at the English Wikipedia. CodeMirror's syntax highlighting was off. The error persists when you start typing. I added the dotted line to the screenshot, to show where everything ought to be aligned.

Screen Shot 2019-04-30 at 11.44.30 AM.png (396×396 px, 25 KB)

Event Timeline

Also can't reproduce. Tried wide/narrow mode with CodeMirror enabled/disabled.

I can reproduce this, in plain vanilla Chrome Version 75.0.3770.142 (Official Build) (64-bit) in my staff account, and in Firefox Quantum 67.0.4 (64-bit) in my volunteer account, but not in Safari.

I looked at it again and had a new idea. Turns out I can reproduce this after customizing the default font size in the browser to be ~20px or larger. (For easier testing, you can equivalently also set html { font-size: 20px; } in your site CSS.) For example, the option in preferences in Firefox looks like this:

image.png (1×1 px, 73 KB)

Then the page looks like this:

image.png (1×1 px, 163 KB)

I am not sure why this results in this problem, but I'm guessing we're using px or em values wrong.

@Whatamidoing-WMF Can you check if you have increased font size in your browser settings? I assumed that your initial screenshot was zoomed in for our convenience, now I'm wondering if it's in actual size.

Change 536371 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Fix Vector wikitext surface padding overrides when using custom browser font-size

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

@Whatamidoing-WMF does this sound like the cause (using a non-standard font size)?

Change 536371 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Fix Vector wikitext surface padding overrides when using custom browser font-size

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

matmarex moved this task from Code review to QA on the VisualEditor (Current work) board.

@Whatamidoing-WMF Can you check if it works for you now? (Try on https://en.wikipedia.beta.wmflabs.org/, it's not live on production wikis yet.)

@matmarex: I tried to verify it by changing the font size to 20px and it seems fixed to me, since on Beta the text "New section" is aligned correctly with the rest of the page and on production it's not.
Is there anything I need to check to verify it?

Screenshot on Beta:

Screen Shot 2019-10-15 at 12.55.47 PM.png (702×1 px, 253 KB)

Screenshot on production:

Screen Shot 2019-10-15 at 12.55.55 PM.png (715×1 px, 204 KB)

I'd just like Sherry to confirm that this also fixes her issue, since I was kind of guessing what the problem was.

Yes! It's fixed for me!

I usually run Wikipedia around 120% zoom. Not being afraid to zoom is one of the benefits of being old.