- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Wed, 14 Feb 2024 00:13:16 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed ``[css-transforms-1] The computed value of `transform` if the transformed element is display:none``, and agreed to the following:
* `RESOLVED: non-transformable elements and elements without a box return a matrix() resolved against a 0x0 box`
<details><summary>The full IRC log of that discussion</summary>
<fantasai> astearns: David, you had a proposal?<br>
<fantasai> dbaron: I'm not sure I'd go so far as to call it a proposal.<br>
<fantasai> dbaron: Basic problem is we don't have interop on getComputedStyle for the transform property for elements that are `display: none`<br>
<fantasai> dbaron: Some UAs try to return none, as though there is no transform... which is weird if there is a transform, but that's also what happens when you do getComputedStyle on an inline box<br>
<fantasai> dbaron: I think?<br>
<fantasai> dbaron: normally, gCS for transforms returns either `none` or a matrix<br>
<fantasai> dbaron: matrix() or matrix3d(). Not a sequence of transform functions.<br>
<fantasai> dbaron: I think some UAs return sequence of transform functions when `display: none`<br>
<fantasai> dbaron: There are 3 reasonably sensible options<br>
<fantasai> dbaron: ... sensible is maybe a stretch<br>
<fantasai> dbaron: Could return a matrix, but some things need a box to e.g. resolve percentages<br>
<fantasai> dbaron: so if you want to return a matrix, you have to make up a box size<br>
<fantasai> dbaron: e.g. 0x0<br>
<fantasai> dbaron: Another option is return `none`<br>
<fantasai> dbaron: Third possibility is to return sequence of transform functions.<br>
<fantasai> dbaron: Maybe it's theoretically sensible, but not done anywhere else so might break people's code.<br>
<fantasai> dbaron: So I think that's probably the least good option<br>
<fantasai> dbaron: I know there is lack of interop, forget who does what<br>
<TabAtkins> q+<br>
<fantasai> Rossen_: Are there any use cases motivating any of these options?<br>
<fantasai> dbaron: Not really. Just need to not break stuff.<br>
<Rossen_> ack TabAtkins<br>
<fantasai> TabAtkins: I don't know what backwards compat is, but I suspect naive code is more likely to depend on matrix() than anything else, so returning matrix against a 0x0 box would be sufficient<br>
<emilio> q+<br>
<fantasai> fantasai: It was only resolving percentages against 0x0, not making the matrix zero<br>
<fantasai> dbaron: so usually it'll still be right, unless you have percentages in translates<br>
<Rossen_> ack emilio<br>
<fantasai> emilio: That's what Gecko does afaict. I don't think we special-case inlines either, just return a matrix for those also<br>
<fantasai> emilio: if there's no box, we use an empty rect and carry on<br>
<fantasai> emilio: Could return computed value instead, that's what we do for a lot of other properties when they don't have a box<br>
<fantasai> emilio: would that break stuff?<br>
<fantasai> dbaron: I don't know if anyone tried to ship that<br>
<fantasai> dbaron: Worried since it parses so differently from the other values<br>
<fantasai> emilio: My preference is between those two<br>
<fantasai> emilio: using transform with empty rect seems more useful than 'none', gives you the right answer most times<br>
<fantasai> fantasai: but wrong answer sometimes<br>
<fantasai> dbaron: Blink does 'none' for case of not having a box. Don't think that's what it does for inlines.<br>
<fantasai> TabAtkins: returns a matrix. it's kinda weird<br>
<fantasai> [seems to be resolved against zero]<br>
<fantasai> Rossen_: You mentioned a compat issue in WebKit?<br>
<fantasai> kbabbitt: That was my interpretationof the prior comments in the issue<br>
<kbabbitt> https://github.com/w3c/csswg-drafts/issues/9121#issuecomment-1691139831<br>
<fantasai> emilio: that looks like breakage if returning a function list<br>
<TabAtkins> (doing `display:block; transform:translate(50%)`, you get `matrix(1,0,0,1,NNN,0)` where NNN is a correct px value. In chrome, `display:inline; transform:translate(50%)` returns `matrix(1,0,0,1,0,0)`.<br>
<fantasai> fantasai: Problem with matrix is that you might think you have the transform, but you don't when you display the box it'll resolve to something else<br>
<fantasai> emilio: that's true if you change width or height<br>
<fantasai> dbaron: If we think doing the matrix does more sense, and I probably lean that way, given Gecko's behavior it seems like something we could try<br>
<fantasai> fantasai: It's not unreasonable answer, not thrilled that it could be misleading<br>
<fantasai> Rossen_: Then let's resolve on the matrix behavior, and see what happens<br>
<fantasai> Rossen_: since no objections<br>
<fantasai> fantasai: Do we resolve on this for both inline and none?<br>
<fantasai> dbaron: Already iimplemented in Blink and Gecko<br>
<fantasai> fantasai: but is it in the spec<br>
<fantasai> dbaron: probably not, so should spec it<br>
<fantasai> dbaron: So for display:none and non-transformable boxes, compute a matrix against 0x0 box.<br>
<emilio> q+<br>
<fantasai> Rossen_: does that include tables?<br>
<kbabbitt> s/tables/table parts/<br>
<fantasai> dbaron: Ignoring SVG, non-transformable would be non-replaced inlines, table columns, and table column groups<br>
<Rossen_> ack emilio<br>
<fantasai> emilio: I prefer a separate resolution for none, because Gecko resolves percentages on inlines against something<br>
<fantasai> dbaron: Chrome does 0x0 on inlines<br>
<fantasai> emilio: ok, we can adopt that<br>
<fantasai> fantasai: I would prefer doing something consistent<br>
<fantasai> emilio: so we'll swap around some engine behaviors<br>
<dbaron> emilio: Gecko uses a size for inlines<br>
<fantasai> PROPOSED: non-transformable elements and elements without a box return a matrix() resolved against a 0x0 box<br>
<fantasai> TabAtkins: Table column elements return 'none'<br>
<fantasai> TabAtkins tests some stuff and is confused<br>
<TabAtkins> <!DOCTYPE html><br>
<TabAtkins> <table><col style="transform: translate(50%);"></col></table><br>
<TabAtkins> <script><br>
<TabAtkins> w(getComputedStyle(document.querySelector("col")).transform);<br>
<TabAtkins> </script><br>
<fantasai> RESOLVED: non-transformable elements and elements without a box return a matrix() resolved against a 0x0 box<br>
</details>
--
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9121#issuecomment-1942886970 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 14 February 2024 00:13:19 UTC