- From: Robert Flack via GitHub <sysbot+gh@w3.org>
- Date: Fri, 19 May 2023 19:52:19 +0000
- To: public-css-archive@w3.org
flackr has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-transitions-2] Put discrete transitions behind new syntax for compatibility == # Problem @josepharhar implemented #4441 and discovered some compat issues. While it seems to be true that developers don't set up transitions on properties that only have discrete values, there are many cases where developers have transitions set up on properties which sometimes have discrete values. E.g. going to/from `auto` currently results in a discrete interpolation. This means that changes to/from auto currently do not start transitions but with transitions of discrete properties they now do. Note: We want to support smooth interpolation to/from auto (See #626). If/when we add this, if it just starts intepolating to/from auto and thus starting transitions we would run into the same set of compat issues. ## Example issues @josepharhar looked through 30 affected sites and found 3 regressions: [stackoverflow.com](http://stackoverflow.com/) With discrete transitions for width and height on page load the orange text doesn’t show up for a frame or two:  [hpe.com](http://hpe.com/) With discrete transitions for max-height, the accordions at the bottom don’t slide closed but instead suddenly close with a delay after clicking:  [fender.com](http://fender.com/) With discrete transitions for top, the menu bar at the top of the page doesn’t stick to the top of the page but instead teleports to the top after a delay when scrolling:  # Solutions From what we have seen so far, the compat issues are only for properties which currently sometimes have interpolable transitions (e.g. length properties which are interpolable when specified but not when `auto`). This means that technically the only transitions which need to be avoided may be these. However, it seems ergonomically awkward to make the developer need to think about whether the property is sometimes interpolable and sometimes not. As such, I think we should come up with a new syntax for opting in to discrete transitions. A side benefit, is that explicitly specifying discrete also provides a way to opt in to discrete transitions on `all` without needing a keyword like [discrete-too](https://github.com/w3c/csswg-drafts/issues/4441#issuecomment-545190019). For comparison, the code necessary to animate out a dialog (animating display and overlay discretely, and opacity) is shown. Some options (vote for all that you think would be reasonable): 1. 😄 Add an optional `discrete` keyword before each `<single-transition-property>` in the [transition-property](https://drafts.csswg.org/css-transitions-1/#transition-property-property) list. `'<single-transition-property>' = discrete? all | <custom-ident>`. With this change you would need to add discrete before each property you wanted to start discrete transitions on, e.g. `transition: discrete display 0.2s, discrete overlay 0.2s, opacity 0.2s` 2. 🎉 Similar to 1, but make the `transition-property` a shorthand for transition-property-name (the current transition-property list), and transition-property-mode (a new list which is auto-extended). This means that you can specify per property whether it should transition discretely or you can specify `transition-property-mode: discrete` and it will auto-extend and transition all specified properties discretely. e.g. `transition: display 0.2s, overlay 0.2s, opacity 0.2s; transition-property-mode: discrete;` (the discrete is a list that can be specified per property but is auto-extended). 3. ❤️ Add a `discrete` keyword optional keyword which applies to the whole transition-property-list. `transition-property = none | discrete? <single-transition-property>#`. With this, you would opt in to all specified properties transitioning discretely but wouldn't be able to choose per property. e.g. `transition: discrete display 0.2s, overlay 0.2s, opacity 0.2s` (the discrete applies to the entire list in this case) As mentioned above, if we eventually support non-discrete animation to/from `auto`, we will have the same compat issues if they work with the existing syntax. As such, we should consider whether any of the above syntaxes (or some other not-yet presented option) could be extended for this auto case. E.g. maybe `transition-property-mode: used-value`? Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8857 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 19 May 2023 19:52:21 UTC