Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-contain-4] Make content-visibility animatable #8627

Closed
flackr opened this issue Mar 21, 2023 · 6 comments · Fixed by #8737
Closed

[css-contain-4] Make content-visibility animatable #8627

flackr opened this issue Mar 21, 2023 · 6 comments · Fixed by #8737
Labels

Comments

@flackr
Copy link
Contributor

flackr commented Mar 21, 2023

css-contain Section 4 currently defines the content visibility property to be Animation type: not animatable. Most likely this was done for simplicity since like display it can affect which animations are running. However, as with display where we are better refining the ways in which it is safe to animate (See #6429), we should figure out in which ways content-visibility can be animated.

In particular, just like display it should be possible for an animation to extend the application of content-visibility: visible in order to allow content to stay visible while an animation is completing. This would be useful for elements like <details> whose contents are content-visibility: hidden when closed.

@chrishtr chrishtr added the Async Resolution: Proposed Candidate for auto-resolve with stated time limit label Mar 21, 2023
@chrishtr
Copy link
Contributor

content-visibility was mentioned here, but we just reailzed it wasn't explicitly covered during the CSSWG agenda on the topic. I don't think it will be at all controversial, so propose an async resolution

@flackr
Copy link
Contributor Author

flackr commented Mar 21, 2023

My simple proposal would be that auto and hidden are both not allowed by owned animations (e.g. CSS animations), and these two values would be treated as revert, as either of these values could result in a CSS animation no longer running. We would also prefer the visible value in interpolation - consistent with our resolution to avoid none in display interpolations.

@astearns
Copy link
Member

@flackr can you put a bit more detail into your proposal? I am not entirely sure how to summarize the above for an async resolution.

@flackr
Copy link
Contributor Author

flackr commented Mar 30, 2023

The three main points are:

  1. Make content-visibility animateable
  2. Adjust interpolation behavior (similar to display) to avoid the possibly hidden values auto and hidden. Meaning that when interpolating to/from visible the interpolated result for any intermediate progress is visible.
  3. Follow the same pattern as display for ensuring that css animations cannot deactivate themselves. Currently following that pattern would mean treating auto and hidden as revert.

@astearns
Copy link
Member

astearns commented Apr 4, 2023

Thanks for explaining further. This seems like a good thing to get in the spec for more review.

The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.

Proposed Resolution: Make content-visibility animateable as above

@astearns astearns added Async Resolution: Call For Consensus Resolution will be called after time limit expires and removed Async Resolution: Proposed Candidate for auto-resolve with stated time limit labels Apr 4, 2023
@astearns
Copy link
Member

RESOLVED: Make content-visibility animateable as above

@astearns astearns removed the Async Resolution: Call For Consensus Resolution will be called after time limit expires label Apr 11, 2023
flackr pushed a commit to flackr/csswg-drafts that referenced this issue Apr 19, 2023
Allow animating content-visibility as animation type discrete with
special interpolation to avoid hidden values similar to visibility.
Fixes w3c#8627
flackr added a commit that referenced this issue Apr 20, 2023
Allow animating content-visibility as animation type discrete with
special interpolation to avoid hidden values similar to visibility.
Fixes #8627.
@frivoal frivoal added css-contain-2 Current Work and removed css-conditional-6 labels Jun 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants
@frivoal @flackr @astearns @chrishtr and others