Reference list <div> can overlap a template <div> because that's how HTML works
Open, LowPublic8 Story Points


Recently there is a problem when edditing an article, which has a block of refernece list, that the reference list overlaps the block off infobox as displayed at the screenshot. It happens when you open such page to edit:

and accidently drive your cursor passing by the references and than to infobox area. It hightlights reflist and than once you click in reference area to the taxobox to edit it. You are not opening infobox template, but ref list. I think this might be confusing and basicaly blocks should not overlap eachother.

Juandev created this task.Jul 2 2015, 6:09 AM
Juandev updated the task description. (Show Details)
Juandev raised the priority of this task from to Needs Triage.
Juandev added a subscriber: Juandev.
Restricted Application added a project: VisualEditor. · View Herald TranscriptJul 2 2015, 6:09 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

There's not much that can be done about this. The HTML box model says that they do indeed overlap, it's just the text flow algorithm that stops them colliding.

The only way to stop them colliding would be:

  • Use display:table instead of block, but this would likely cause more unforseen problems. We try not to restyle elements as much as possible.
  • Calculate the highlights based on text content. This would be very slow, and potentially ugly.
Restricted Application added a subscriber: matej_suchanek. · View Herald TranscriptAug 11 2015, 12:40 PM
Jdforrester-WMF renamed this task from Reference div overlaps Infobox div to Reference list <div> can overlap a template <div> because that's how HTML works.
Jdforrester-WMF triaged this task as Low priority.
Jdforrester-WMF set the point value for this task to 8.
Jdforrester-WMF set Security to None.

I think we could notably improve 99% of the cases here by just having some extra handling for Focusable nodes that are outside of normal flow (absolutely positioned or floated, "out-of-flow").

Basically, pre-calculate focusable highlights for out-of-flow nodes (there should not be very many, even only has about 60, see test function below), then when displaying any focusable highlights for a node in-flow, mask/subtract the out-of-flow highlights (this might require T190226 first).

A references list colliding with an infobox is the most common case, but this can also happen with e.g. block-template/gallery colliding with e.g. image/mapframe.

Function to determine whether a DOM element is out-of-flow, per the "cheatsheet" at

$('.ve-ce-surface *:not(.oo-ui-iconElement-icon)').filter(function isOutOfFlow(i, elem){
		display = $(elem).css('display'),
		position = $(elem).css('position'),
		float = $(elem).css('float');
	if ( display === 'none' ) return false;
	if ( position === 'absolute' || position === 'fixed' ) return true;
	if ( float !== 'none' ) return true;
	return false;

(I'm not working on this right now, but I'd like to investigate it soon)

matmarex updated the task description. (Show Details)May 20 2018, 1:55 PM