Page MenuHomePhabricator

When use Firefox to edit a section of an article, the VisualEditor ends up incorrect position
Closed, ResolvedPublic

Description

Author: lovefilms

Description:
The screen shot of the missing Production section trying to edit

When click on Edit to edit a section of an article, for example,
https://en.wikipedia.org/wiki/Blue_Jasmine#Production
the result page https://en.wikipedia.org/wiki/Blue_Jasmine?veaction=edit#Production appears to be a huge toolbar on top, and the section of "Production" is almost invisible - see attached screen shot.

Also, the toolbar should be clearly marked with visible borders to distinguished from the contents of an article. Now it's almost blurred into the article and very confusing.


Version: unspecified
Severity: major
OS: Windows 7
Platform: PC

Attached:

Details

Reference
bz51998

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 1:43 AM
bzimport added a project: VisualEditor.
bzimport set Reference to bz51998.

Which Firefox version is this about?
Can you reproduce the problem with other browsers?

I think is is related to screen resolution \ the size of the browser window. If you have a low resolution (Or resize the browser window to be small enough) Firefox 22 and Chrome 28 will place the "ve-ui-toolbar-actions" element on a second line in the edit toolbar.

If you edit a section in the small-size browser it will scroll to the section as it normally would, but doesn't take the twice-as-high-as-usual edit toolbar into account when determining where to stop. As a result the section header is actually positioned under the second toolbar line. If you resize the browser afterwards to a size that allows for a single-line edit toolbar the section header will be correctly positioned.

(e/c) I can reproduce on Firefox 22/Linux and Windows, and on Chrome/Windows to a lesser degree when using https://en.wikipedia.org/wiki/Blue_Jasmine?veaction=edit#Production or when loading https://en.wikipedia.org/wiki/Blue_Jasmine?veaction=edit and click the 'edit' link beside 'Production' (the bug doesnt occur if middle-clicked, as that open the url with 'vesection=3' added).

Most times I do this, it is possible to see the viewport position itself correctly at the anchor, but then then toolbar appears covering the section heading and a half of the first line of text.

lovefilms wrote:

I am using Firefox 22 as well (on Windows 7).

The IE9 doesn't seem to have the VisualEditor, the edit link will simply goes to https://en.wikipedia.org/w/index.php?title=Blue_Jasmine&action=edit&section=3

Qgil added a comment.Aug 22 2013, 4:54 PM

Firefox 23.0 for Ubuntu:

Everything works fine when clicking the "Edit (beta)" link at https://en.wikipedia.org/wiki/Blue_Jasmine#Production - fullscreen window as well as small window.

Chromium 28.0.1500.71 for Ubuntu

Same thing a above. It just works.

lovefilms wrote:

I am in FF23.0.1 and the VisualEditor is working as intended now. I go ahead to mark it as Resolved - since people can always use the new version of FF.