W3C home > Mailing lists > Public > www-style@w3.org > December 2021

[CSSWG] Minutes Telecon 2021-12-08 Part I: Publications, Proposal: Shared Element Transitions [css-snapshot] [css-transforms] [css-color-4] [css-color-5]

From: Dael Jackson <daelcss@gmail.com>
Date: Thu, 9 Dec 2021 07:12:06 -0500
Message-ID: <CADhPm3vi40iFPOnuBpbVSNfn=Y7Y-HdkNvWsc2Q0DXgnPFwmWw@mail.gmail.com>
To: www-style@w3.org
  These are the official CSSWG minutes.
  Unless you're correcting the minutes,
 Please respond by starting a new thread
   with an appropriate subject line.


  - RESOLVED: Transforms 2 to "rough interop" (Issue #6243: Snapshot
  - RESOLVED: Other specs as proposed, except for Color 4 and
              overscroll-behavior (Issue #6243)
  - RESOLVED: Publish Snapshot 2021 as a NOTE after edits (Issue #6243)
  - RESOLVED: Publish Color 4 and Color 5 as WD (Issue #6854: Color 4
              and Color 5 Publication)

Proposal: Shared Element Transitions

  - khush presented the proposal for shared element transitions (slides
      available here:
  - There was broad interest in the proposal and questions to help
      refine it further. Discussion will continue in the GitHub repo
      ( https://github.com/WICG/shared-element-transitions ) and
      specific issues will be added to the CSS agenda as they're ready
      for discussion.


Agenda: https://github.com/w3c/csswg-drafts/projects/27

  Rachel Andrew
  Adam Argyle
  Tab Atkins-Bittner
  Delan Azabani
  Oriol Brufau
  Tantek Çelik
  Emilio Cobos Álvarez
  Elika Etemad
  Megan Gardner
  Chris Harrelson
  Daniel Holbert
  Brian Kardell
  Jonathan Kew
  Vladimir Levin
  Rune Lillesveen
  Chris Lilley
  Alison Maher
  François Remy
  Florian Rivoal
  Dominik Röttsches
  Cassondra Roberts
  Khushal Sagar
  Jen Simmons
  Alan Stearns
  Miriam Suzanne
  Lea Verou

Scribe: fantasai
Scribe's scribe: TabAtkins


Snapshot 2021
  github: https://github.com/w3c/csswg-drafts/issues/6243

  florian: fantasai and I prepared a draft for this year
  florian: More or less identical to last year other than dates
  florian: Went through list of specs to propose
  florian: Reminder there's 3 buckets
  florian: Stable = things that are REC or almost REC
  florian: Rough Interop = roughly interoperable, but spec is in rough
           shape and lots of issues, but things are shipping
  florian: Awaiting Implementations = spec is "done" as far as can be
           without implementation work, but don't have enough
           implementation to know if stable yet

  florian: We've made a list of some things that might go into the 2021
  florian: First is, Lists 3 specification
  florian: Other than the marker-side property, seems that everything
           is implemented even though spec is not completely finished,
           not that far away
  florian: so is that one ready for Rough Interop?
  florian: Next is Counter Styles 3, seems ready for Stable (Official
  florian: Logical Properties should be in "rough interop"
  florian: One we have a question, what is the status of
           "overscroll-behavior", should it be in "rough interop" or
           not yet?
  florian: Next is css-position-3, seems to be "rough interop"
  florian: Scrollbars 1 now CR should be in "Awaiting Implementations"
  florian: css-sizing-3 in Rough Interop
  florian: Another question: what's status of resize-observer? Should
           it go into "rough interop"?
  florian: Same question for Web Animations 1

  astearns: Also suggestion for css-fonts-4 to "rough interop"
  astearns: and css-color-4 to official
  <chris> https://test.csswg.org/harness/results/css-fonts-4_dev/grouped/
  <chris> https://test.csswg.org/harness/results/css-color-4_dev/grouped/

  jensimmons: Spec considering in Interop 2022, which is cross-browser
              effort to focus on testing and interop fixes
  jensimmons: overscroll-behavior
  florian: Does it mean that after next year it will be in "rough
  jensimmons: No I think now
  emilio: ...
  emilio: propagation from the body
  emilio: basically Blink implements the spec wrong
  emilio: In order to make it work on Blink, you have to set it on BODY
          and for everyone need to set it on root
  emilio: *other* than that it's roughly interoperable

  <chris> are suggestions for color 4 and fonts 4 accepted?
  <fantasai> I think color 4 should go to CR first before going
             official; Fonts 4 to rough interop seems fine

  smfr: I would hold off on overscroll-behavior
  astearns: OK, overscroll-behavior off the list
  astearns: css-sizing-3?
  astearns: Should we push it down to rough interop? It's currently in
            stable but not CR
  * fantasai is surprised it was in stable

  chris: Color 4 should be in CR
  chris: have shipping implementations, lots of interp
  chris: anachronistic to link to Color 3
  florian: Still have open issues, not a lot, but right now at 7
  florian: so certainly qualifies under the 2nd bucket, but official
           definition, maybe not so much
  fantasai: I would prefer to wait until next year. Top bucket specs
            should be in CR or later.
  <chris> ok, agreed re color-4

  astearns: Take sizing to rough interop for the same reasons
  astearns: Anyone with opinions about resize-observer or web
  smfr: Both of those into rough interop
  astearns: anyone disagree?
  astearns: OK, I think we're at consensus for the list of things in
            the issue.
  astearns: What about Transforms 2?
  astearns: It was suggested to add it to stable last year?
  fantasai: It's pretty rough, should go into rough interop.
  smfr: sgtm
  dbaron: There are some pieces not interoperable and many pieces that
          are, so sounds good to me
  astearns: My suggested resolution is to take all of the suggested
            edits, including moving transforms 2 to rough interop,
            except for color 4 and overscroll-behavior
  <chris> +1

  RESOLVED: Transforms 2 to "rough interop"

  RESOLVED: Other specs as proposed, except for Color 4 and

  astearns: Proposed to publish Snapshot 2021 as a Note

  RESOLVED: Publish Snapshot 2021 as a NOTE after edits

  astearns: How much time until end of year publishing moratorium?
  florian: Should be fine, will be done quickly

Color 4 and Color 5 Publication
  github: https://github.com/w3c/csswg-drafts/issues/6854

  chris: Fairly major changes with WG consensus, including shifting
  chris: Significant edits in last 6 months
  chris: Regular WD
  chris: For Color 4, hopefully last publication as a WD
  astearns: Any objections?

  RESOLVED: Publish Color 4 and Color 5 as WD

  fantasai: Should publish more frequently
  fantasai: Nobody outside people reviewing new spec text should need
            to look at ED, ideally TR is up to date
  fantasai: will take us awhile to get there with all our specs, but
            that should be the goal

Proposal: Shared Element Transitions
  github: https://github.com/w3c/csswg-drafts/issues/6464

  <khush> Here are the slides:
  khush: Going to use a very simple example
  [slide 2]
  khush: ...
  khush: Core design in both states
  khush: what to highlight new CSS attribute called page transitions tag
  khush: During transition we create alternate representation of DOM
         after snapshotting
  khush: Page tells us which parts to snapshot as independent pieces
  khush: This is saying root element should also be captured

  khush: Other aspect is properties that are changing
  [slide 3]
  khush: This slide shows box tree during transition
  khush: have root stacking context, author dom underneath
  khush: during transition we create tree of pseudo-elements that is
         sibling of root stacking context
  khush: highlight fact that this transition stacking context, it
         paints as a sibling of the root context
  khush: reason is, these content elements are displaying images from
         author dom
  khush: it's displaying root stacking context
  khush: Initially tried to place n top layer, but ran into circular
  khush: wanted to capture other elements in top layer
  khush: so put it in an independent stacking context as sibling of root

  [slide 4]
  khush: On the left dom structure, on the right stylesheet from UA
  khush: focus on container element
  khush: we have layout computed properties for each element with a
         page-transition tag
  khush: and we have transform that maps into ?? space
  khush: UA that generates, box renders at same spot that renders in
         author DOM
  khush: Last is z-index for paint ordering
  khush: we compute that and use z-index to paint in same order in
         pseudo tree
  khush: container get us box that maps to actual element's box
  khush: content of element comes from old-content and new-content
  khush: Using element in CSS to get a painted representation of the
         DOM element's contents
  khush: this is a snapshot of element in the new dom
  khush: the old one is snapshot of old content with cacehed element
  khush: we cache a static paint to retain the content of the old dom
  khush: then DOM changed to new state

  [slide 5]
  khush: Previous slide showed transition pseudo element tree and how
         to make it look like author dom
  khush: this shows the animations showing change from old to new state
  khush: first animates box from old size and position to new size and
  khush: for the content just do a swap, old content fadesin / new
         content fades out
  khush: because of all the pseudo elements exposed to developer, can
         customize any way they want

  [slide 6]
  khush: This slide meant to highlight the ...
  khush: Want to approximate the rendering as much as possible
  khush: issue with inherited properties
  khush: Won't retain inherited from ancestors, but will retain
         positioning and screen space transforms
  khush: When generating snapshot, doesn't include any effects from
  khush: Everything with a page-transition tag paints in same order in
         pseudo-element tree
  khush: but if element ?? wasn't tagged, then its content is in the
         root element image
  khush: and this will cause a paint order change
  khush: Last is the liveness of DOM, old DOM is static, but new dom is
  khush: By design; that's how element() function works today

  [slide 7]
  khush: List of spec changes
  khush: First is to update the element() spec
  khush: Right now element() generates an element that is size of
         element's bounding box
  khush: ink overflow is getting clipped
  fantasai: Don't think you can include the ink overflow
  fantasai: because then size of image is unpredictable, and can't be
            accurately positioned by the author
  fantasai: and ink overflow is potentially infinite, and where it gets
            clipped will vary by implementation

  khush: Next is standardizing the pseudo-element tree
  khush: so need to spec that
  khush: then need to define new stacking context for transitions
  khush: and because of ink overflow, need to define that replaced
         element can overflow its box
  khush: blending pixels, have a proposal to allow that

  khush: Right now actively implementing this
  khush: want to get feedback in WICG on issues like fantasai raised
  khush: as implementation matures will discuss issues
  astearns: Suggest participating in repo, would like to get this
            feature right
  astearns: On the call want to discuss if any serious concerns with
            the direction being proposed

  smfr: Various limitations in escaping ancestor effects like opacity
        and filters
  smfr: makes me think people will write pages ...
  smfr: pop out of ancestor opacity and then move
  smfr: Seems limitation of implementation, only snapshotting things
        and not the whole tree?
  khush: 2 additions
  khush: right now snapshotting the whole element
  khush: but added a mode where only snapshotting ?? and keep
         decorations and other things
  khush: the other mode also snapshots highlighting etc. (????)
  khush: Want to get there, but incrementally
  khush: can point to explainer
  khush: don't have issue of ancestor effects not being preserved
  smfr: Showed pseudo-element hierarchy
  smfr: you're snapshotting old content
  smfr: using pseudo-elements to define animations
  smfr: but no DOM node behind that
  khush: Once cached the state, need to be able to represent
  khush: to get the rendering to look like author DOM, we made a tree
         of pseudo-elements
  smfr: There are some similarities with things like animation-worklet
  smfr: where you have a little JS world where you are limited in what
        you can do, but this is a little different
  khush: Because pseudo-elements, limits in what you can do
  khush: e.g. introducing own notes in tree or changing structure of
  khush: getting to work with those requests is difficult
  khush: limitations are defined here by what you can do with
  khush: so you can change their style, but not their structure

  khush: Can animate using CSS animations
  smfr: Can you apply arbitrary properties?
  khush: Yes
  smfr: So you are running layout on the tree
  khush: We had cases where box aspect ratio was changing, wanted not
         to stretch but to clip, so set 'object-fit' and it just work
  smfr: When p-e tree is showing, is it sitting on top and cans ee
        document underneath?
  khush: In UA stylesheet we set 'visibility: hidden' on elements with
         page-transition tag
  khush: don't actually show the page content, but still there
  khush: If changing small part of page, don't put page-transition tag
         on the root
  khush: so that keeps showing new DOM
  khush: but see the transitions on top of it
  smfr: Is the old page content a snapshot?
  khush: Yes
  khush: and then we save the hierarchy as well
  smfr: So if page content has animation, that will freeze
  khush: Yes
  khush: New DOM is live, but old DOM is frozen

  astearns: Suggest putting links to the specific parts of explainer/
            issue that respond to the things discussed here
  <fremy> just in general, I think this is a very interesting proposal
  jensimmons: Also helpful to have resources to explain author
  khush: The explainer takes an example of one page, and has the author
         CSS that you need to get the transition working. I'll link to
         that section also
  astearns: Fine to put Agenda+ either on this meta-issue or adding a
            new issue, to discuss particular parts of this proposal
  astearns: Would rather do that than doing general discussion again
  astearns: Thanks very much for presentation, very cool stuff.
Received on Thursday, 9 December 2021 12:13:49 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:19 UTC