Page MenuHomePhabricator

CX2: Unnecessary vertical/horizontal scrollbars displayed for images
Closed, ResolvedPublic

Description

There are several cases when the source article in CX will display horizontal and vertical bars that do not serve the purpose - the image fit the canvas and do not need scrolling.

(1) The good example is en: 'Crystal structure' - the article has several images that will display horizontal, vertical or both scrollbars.

Screen Shot 2018-08-17 at 5.01.41 PM.png (570×895 px, 48 KB)

The section 'Interplanar spacing' has unnecessary vertical bar which occupies the entire vertical length (the display extends viewport, so the screenshot is not fully representative of the issue):
Screen Shot 2018-08-17 at 5.29.37 PM.png (584×511 px, 43 KB)

(2) he:רובוטבוי - will have unnecessary horizontal scrolling bars:

Screen Shot 2018-08-17 at 5.24.37 PM.png (647×518 px, 77 KB)

Event Timeline

Amire80 subscribed.

I can reproduce it when translating Alex Weiss (אלכס וייס) from Hebrew to English.

Another report from the Hebrew Wikipedia:

בעיה בעורך החדש 1.png (1×1 px, 179 KB)

This doesn't appear in an image section, but a usual text section.

The scrollbar shouldn't appear, of course: The section is supposed to auto-adjust its height.

... And one more report about the scrollbars from the Hebrew Wikipedia.

Here, I managed to reproduce it myself:

Screenshot_2018-11-23 תרגום דף – ויקיפדיה(2).png (528×1 px, 124 KB)

This is from translating Pierre Gripari from French to Hebrew.

I'm not sure what are the precise steps to reproduce this, but I'm pretty sure that the target section is suppose to grow automatically and not to show a scrollbar.

Perhaps, in this case it's related to the presence of the {{citation}} template in the source article, which is an inline template in French, but a block-level template in Hebrew (given that their design is significantly different, they probably shouldn't be linked in the first place, but that's a separate issue).

I re-checked with the article that was reported in the ticket - en:Crystal structure. The reported issue is reproducible there - saw it in Chrome 70.
Interesting that some images do not display scroll bars - e.g. in the 'Crystal structure' article, see 'Lattice systems' section.

In the translation of Row House in Sumiyoshi from English to Spanish, when addign the first text paragraph using Yandex, one of the adapted templates seems to be rendered after the paragraph is added and is not triggering the paragraph alignment/resizing algorithms, which result on scrollbars:

Dec-12-2018 10-42-04.gif (335×640 px, 3 MB)

I'll update the title of the ticket to make it not limited to images.

Pginer-WMF triaged this task as Medium priority.Dec 19 2018, 9:26 AM

Diagnosis:

The events to re-align the sections are fired correctly. In debounced manner, ve.init.mw.CXTarget.prototype.alignSectionPair is also invoked. But in in ve.init.mw.CXTarget.prototype.alignSectionPair we had done an early evaluation to see if alignment is correct. This is done using

mw.cx.ui.TranslationView.prototype.hasMisalignedSections = function () {
	return this.sourceColumn.$content[ 0 ].offsetHeight !== this.targetColumn.$content[ 0 ].offsetHeight;
};

We are checking if the source column height is same as target column. If so we assume that every section inside these columns are of equal height. If this method return true, we are not doing alignment.

However, when the sections has generated nodes such as templates, the content get re-render after a slight delay. The events for alignment will get triggered. Since the sections has height set to an absolute value and overflow is auto, there will be vertical scrollbars at this point. The height was set by an earlier alignSectionPair method such as when the section was added to translation. Since the scrollbars will not cause any change to the overall height of source column or target columns, hasMisalignedSections will return false. Hence the alignment will be aborted.

Solution:

The early return optimization in ve.init.mw.CXTarget.prototype.alignSectionPair is proved to be faulty and to be removed, at the cost of performance gain we had with it so far.

Change 508497 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Remove faulty mw.cx.ui.TranslationView#hasMisalignedSections

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

It would be great to check if these adjustments help with the related issues described in T216412 and T222888.

Change 510069 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Revert "Section alignment: Do a quick test to determine the alignment need"

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

Change 508497 abandoned by Santhosh:
Remove faulty mw.cx.ui.TranslationView#hasMisalignedSections

Reason:
See https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ContentTranslation/ /510069

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

510069 is not solving unnecessary scrollbars from the description of this ticket. Problems of alignment described in T202180#4816371 are solved.

It would be great to check if these adjustments help with the related issues described in T216412 and T222888.

T222888 had a separate patch and is solved now. With that patch and patch for this ticket, T216412 is also solved, so I moved it to QA on current quarter board.

Change 510069 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Revert "Section alignment: Do a quick test to determine the alignment need"

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

Checked the reported cases in wmf.7 - the unnecessary horizontal/vertical scrolling.

<gallery class="center">
Image:Lattic_simple_cubic.svg|Simple cubic (P)
Image:Lattice_body_centered_cubic.svg|Body-centered cubic (I)
Image:Lattice_face_centered_cubic.svg|Face-centered cubic (F)
</gallery>

Since the majority of cases for horizontal.vertical scrolling have been fixed, the ticket is 'Resolved'. If more specific cases (e.g. for Gallery) would be found, they may be a subject for a different task.