Page MenuHomePhabricator

[subtask] Moving infobox causes re-render
Closed, ResolvedPublic

Description

Seen on the Taiwan page on reading web staging:

Note how the second infobox moves into the Etymology section causing text to reflow.

Note: There is an unrelated re-render triggered by the page issues link appearing at the top of the page. Please ignore this as this will be solved by redesigning the page issues treatment.

Developer notes

This appears to be related to the loading of the CSS rule:

.client-js .collapsible-block {
    overflow: hidden;
}

I'm pretty sure this rule is redundant given the new changes introduced in T189688

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 30 2018, 5:45 PM

Change 429982 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Improve use of whitespace on tablets

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

Jdlrobson renamed this task from Moving infobox causes re-render to [subtask] Moving infobox causes re-render.Apr 30 2018, 8:45 PM
Jdlrobson added a subscriber: alexhollender.

^ @alexhollender I've put this on staging. I think it solves the issue with Taiwan and USA. Can you check it out and see if it causes any other problems elsewhere?

Change 429982 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Improve use of whitespace on tablets

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

Change 430098 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Freely floating tables and images

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

Change 430098 abandoned by Jdlrobson:
Freely floating tables and images

Reason:
Too risky

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

@Jdlrobson yes this seems to do the trick. I don't think it needs additional QA. Going to move to Sign off.

Jdrewniak added a subscriber: Jdrewniak.EditedMay 2 2018, 9:46 AM
.client-js .collapsible-block {
    overflow: hidden;
}

That rule is not redundant, what it actually does is magic! (which I now realize, should really be documented)

What that rule does is it creates a new "block formatting context" a concept briefly described in T189688#4162235 which essentially creates a bounding box that prevents floated thumbnails from "escaping" the section, while letting the section take up the available space beside the infobox.

Without this rule, the floated thumbnails get pushed next to the last floated element, which is probably the infobox.

With this rule, the floated thumbnails get contained within the "block formatting context"

Which is probably better. This rule does mean that the sections don't wrap around the infobox, but it's still preferable than having the thumbnails in weird places.

Regarding the reflow, this is caused because the rule was attached to the .client-js class, which gets appended after page-load. If it was attached just to

.collapsible-block {
    overflow: hidden;
}

then that wouldn't trigger the reflow.

Alternatively, we could also use display: table which also creates the new bounding box, and it's a bit more obvious then the benign looking overflow: hidden. scratch that, that might interfere with the jQuery .show() .hide() that uses display: block/none to show hide elements a lot.

looks good to me. @Jdrewniak - any suggestions on where to document this?

Change 430378 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Prevent floated element from breaking out of content sections

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

Change 430378 abandoned by Jdrewniak:
Prevent floated element from breaking out of content sections

Reason:
not required

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

Change 430098 restored by Jdlrobson:
Freely floating tables and images

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

ovasileva closed this task as Resolved.May 9 2018, 5:04 PM

Resolving this and will keep further issues under the parent task

Vvjjkkii renamed this task from [subtask] Moving infobox causes re-render to lydaaaaaaa.Jul 1 2018, 1:13 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed ovasileva as the assignee of this task.
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii edited subscribers, added: ovasileva; removed: gerritbot, Aklapper.
CommunityTechBot renamed this task from lydaaaaaaa to [subtask] Moving infobox causes re-render.Jul 1 2018, 2:18 PM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to ovasileva.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot edited subscribers, added: gerritbot, Aklapper; removed: ovasileva.
CommunityTechBot raised the priority of this task from High to Needs Triage.Jul 3 2018, 1:49 AM

Change 430098 abandoned by Jdlrobson:
Freely floating tables and images

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