Nothing Special   »   [go: up one dir, main page]

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-view-transitions] view transitions to customize the appearance of entering/exiting fullscreen? #10609

Open
romainmenke opened this issue Jul 22, 2024 · 4 comments
Labels
css-view-transitions-2 View Transitions; New feature requests

Comments

@romainmenke
Copy link
Member
romainmenke commented Jul 22, 2024

With the full screen API we can take any DOM element and request it to be displayed full screen.
This works great but the transition often looks very bad.

example : https://www.maison-osain.com/projects/house-linaza/ (look for VIEW FULLSCREEN)

Firefox:

  • different animations on each open/close
Firefox.mp4

Safari:

  • weird jump between a transform and a more fluid re-layout?
Safari.mp4

Chrome does better as it doesn't try to animate these.
It just does a hard cut to full screen mode.


Is this something that (in theory) could be improved and customized with view transitions?

@romainmenke romainmenke changed the title [css-view-transitions] Native view transitions to customize the appearance of entering/exiting fullscreen? [css-view-transitions] view transitions to customize the appearance of entering/exiting fullscreen? Jul 22, 2024
@khushalsagar
Copy link
Member

Is this something that (in theory) could be improved and customized with view transitions?

Yea. We need a new opt-in to do a same-document ViewTransition for the fullscreen case. Authors can't do it using the document.startViewTransition API since that needs to be called before the DOM change. And by the time the author is notified of the fullscreen event, it's already too late.

There's also the problem that we currently abort transitions if the "snapshot containing block" size changes here. Instead likely the cached transforms need to be adjusted so the elements stay-in-place when the viewport size changes.

@nt1m @noamr @vmpstr

@noamr
Copy link
Collaborator
noamr commented Jul 22, 2024

Is this something that (in theory) could be improved and customized with view transitions?

Nice idea!

Yea. We need a new opt-in to do a same-document ViewTransition for the fullscreen case. Authors can't do it using the document.startViewTransition API since that needs to be called before the DOM change. And by the time the author is notified of the fullscreen event, it's already too late.

Why not?
document.startViewTransition(() => element.requestFullscreen())

There's also the problem that we currently abort transitions if the "snapshot containing block" size changes here. Instead likely the cached transforms need to be adjusted so the elements stay-in-place when the viewport size changes.

Note that an element becomes full-screen, not a document. Perhaps this would work better with element-scoped transitions? I think we can find a way to deal with the changes SCB.

@nt1m @noamr @vmpstr

@nt1m
Copy link
Member
nt1m commented Jul 22, 2024

Not super enthusiastic of giving up UA control of this transition, especially given different platforms may have different ideas how fullscreen works.

@khushalsagar
Copy link
Member

Why not? document.startViewTransition(() => element.requestFullscreen())

requestFullscreen() is async. It's not necessary that the next frame after the update callback runs is a fullscreen frame. There's also the fact that exiting fullscreen can be triggered using browser/OS UI.

I think we can find a way to deal with the changes SCB.

+1. We have to for most use-cases of element-scoped transitions. Just wanted to point that this is also a dependency.

Not super enthusiastic of giving up UA control of this transition, especially given different platforms may have different ideas how fullscreen works.

Happy to hear the details on the kind of control you think the UA should keep. We have heard this feature request from other developers as well, being able to animate elements when the layout changes is helpful in re-orienting users.

@fantasai fantasai added the css-view-transitions-2 View Transitions; New feature requests label Oct 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-view-transitions-2 View Transitions; New feature requests
Projects
None yet
Development

No branches or pull requests

5 participants