Re: [csswg-drafts] [css-multicol] Containing block of column spanners (#5612)

Alison has already explained why option 1 is problematic, because determining when to fragment and not is kind of messy and non-intuitive.

So I'm pretty convinced that we want a model where something inside a spanner cannot be contained by something laid out into the columns. There's also an issue with that with option 3, unless we decide that a spanner becomes a containing block for both fixed and absolutely positioned descendants. Firefox seems to only make the spanner a containing block for absolute/fixed positioned descendants if there's an ancestor inside column content that establishes a containing block for absolute/fixed positioned descendants.
```
<div style="columns:2;">
  <div id="transform" style="will-change:transform;">
    <div style="height:100px;"></div>
    <div style="column-span:all; height:100px; background:blue;">
      <div id="fixed" style="position:fixed; top:0; left:0; width:10px; height:10px; background:hotpink;"></div>
    </div>
  </div>
</div>
```

Firefox will make the spanner the containing block of #fixed. However, if we remove the will-change declaration from #transform, the viewport will become its containing block instead. This seems rather non-intuitive, although it does guarantee that nothing inside the spanner will be contained by something laid out into the columns.

This is why I also prefer option 2, where the containing block for fixed/absolute positioned descendants is the nearest containing block of the spanner (starting with the multicol container itself) that's a containing block for fixed/absolute positioned elements. This makes sense, since the spanner is a direct child of the multicol container, layout-wise.

```
<div id="fixedcontainer" style="will-change:transform;">
  <div style="height:100px; background:yellow;"></div>
  <div id="abscontainer" style="position:relative;">
    <div style="height:100px; background:orange;"></div>
    <div style="columns:2;">
      <div id="transform" style="will-change:transform; transform:rotate(4deg);">
 <div style="height:100px; background:gray;"></div>
 <div style="column-span:all; height:100px; background:blue;">
   <div id="fixed" style="position:fixed; top:0; left:0; width:20px; height:20px; background:hotpink;"></div>
   <div id="abs" style="position:absolute; top:0; left:0; width:10px; height:10px; background:cyan;"></div>
 </div>
      </div>
    </div>
  </div>
</div>
```

The containing block for #abs becomes #abscontainer, and the containing block for #fixed becomes #fixedcontainer. The #transform element should be laid out into columns, and be slightly rotated, but this shouldn't affect the spanner, nor its fixed/abspos descendants. Note that EdgeHTML has a bug here, in that it doesn't treat will-change:transform as a containing block for fixed-positioned descendants (regardless of multicol).

-- 
GitHub Notification of comment by mstensho
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5612#issuecomment-707927522 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 13 October 2020 18:26:52 UTC