[css-env-1] values for screen edge avoidance in fullscreen

[grorg]

Similar to #2868, but for fullscreen UI. That is, they apply when a page or element has been taken fullscreen, and refer to UI that is overlaid by the hosting app. For example, a fullscreen interface on a touch device might have a close button in one of the corners, and the page should avoid putting essential content underneath.

The four values are:

• fullscreen-inset-top
• fullscreen-inset-right
• fullscreen-inset-bottom
• fullscreen-inset-left

They evaluate to a <length> value.

[fantasai]

Suggest s/fullscreen/overlay/ if we're going this route. Seems to have more to do with overlaid UI than fullscreening; could every well have this in a non-fullscreened window.

[css-meeting-bot]

The Working Group just discussed Full-screen insets.

The full IRC log of that discussion

<fantasai> Topic: Full-screen insets
<dbaron> https://drafts.csswg.org/css-env-1/#safe-area-insets
<fantasai> github: https://github.com/w3c/csswg-drafts/issues/2871
<dbaron> (that URL was for the previous topic)
<fantasai> dino draws a fullscreen video player
<fantasai> There's a title in the top left corner
<fantasai> there's controls along the bottom
<fantasai> dino: Works fine on a desktop machien because everyone knows you can get out with escape or whatever
<fantasai> dbaron: But touch interface doens't have escape key
<fantasai> dino: So we need to provide some UI for escaping
<fantasai> dino: e.g. an X in the top left corner
<fantasai> dino: Fades away if you haven't touched the screen much lately
<fantasai> dino: Trying to come up with avriables to take the page where it can draw content when the browser UI is available
<fantasai> florian: We kindof alked about that when we were doing round display, with different approach
<fantasai> florian: MQ with coordinate, if I put something there, will it be visible?
<fantasai> florian: Rather than browser trying to prove geometry, can just ask "can I put the box there"?
<fantasai> myles: Why would you want to binary search for an available space? seems awful
<fantasai> dino writes an example
<fantasai> title { pos: abs; top: env(fs-inset-top);
<fantasai> dino: Can even say title { transition: top 1s; }
<fantasai> dino: then the title shifts as the browser UI desappears and appears
<fantasai> dino: While we specify top/left/bottom/right
<fantasai> dino: top effectively reserves the entire top
<fantasai> dino: We might do {various things } in this area
<fantasai> dino: In safe mode, would also have put the left side offset, but we decided to just do the top
<fantasai> ...
<fantasai> astearns: ...
<fantasai> dino: The issue is that we did that for awhile, and it looks weird if the title is not at the top. Looks lik they've got a weird design
<astearns> s/.../so the space taken up by the browser UI is only known when the UI is showing/
<fantasai> dino: Other issue I link to, because we fade out the X, it's a good example where YouTube fades out their UI as well
<fantasai> dino: Might want to expose timers on our fading so they can synchronize
<fantasai> heycam: Maybe use events rather than time?
<fantasai> dino: Events makes more sense, usually we're responding to those in JS anyway
<fantasai> heycam: ...
<fantasai> dino: We'd also have to publish and make sure everyone's listening to the same events
<fantasai> dino: That's basically the two proposals. Happy for any suggestions or comments
<fantasai> florian: What we started with seemed nice and simple
<heycam> s/.../also you don't know when exactly to start counting those seconds/
<fantasai> florian: but semes like maye they're overly simplified, and as you get into more complicated situations we keep having to add mroe and more tricks
<dbaron> s/dbaron:/?:/
<fantasai> dino: It's veyr specific to our design, but we want to have something that works for others as well.
<fantasai> florian draws a dashboard display and asks about how far are we going to go
<fantasai> dino: safe-area-* is about hardward shapes. fs-inset is about on-screen displays
<fantasai> florian: ...
<fantasai> myles: System with arbitrary shapes would be so difficult to use that no developer would do it
<astearns> s/hardward/hardware/
<fantasai> Rossen: Similar to this, we had a value called device-fixed
<fantasai> Rossen: Worked exactly you describe,
<fantasai> Rossen: When onscreen keyboard came in, didn't want to resize the entire window
<fantasai> Rossen: But i fyou wanted to attach UI on top of the keyboard, e.g.
<fantasai> Rossen: Insteadd of positoin: fixed
<fantasai> Rossen: You'd do position: device-fixed
<fantasai> Rossen: And it would adjust
<fantasai> Rossen: You won't have to resynch or compute any numeric values like top/bottom etc.
<astearns> s/?:/dino:/
<fantasai> dino: You wouldn't be able to animate
<fantasai> Rossen: That would be done for you
<fantasai> Rossen: Basically saying that the device now is going up
<fantasai> Rossen: on-screen keyboard is cming up
<fantasai> Rossen: If this UI was important for YouTupe, they'd simply position this as device-fixed
<fantasai> Rossen: And then this simply becomes bottom: 0;
<fantasai> Rossen: And they don't need to do anything else
<fantasai> Rossen: They don't even know, it's still the same thing
<fantasai> florian: If you are sizing things, would that affect viewort units?
<fantasai> Rossen: This is ovekill
<fantasai> Rossen: Another example put forward was if you have, suppose some vertical sidebar
<fantasai> Rossen: Same thing, a bit more work for us, but if you have positioned top and obttom it would respond
<fantasai> Rossen: From what I know, it was very successful because very simple
<fantasai> Rossen: position: fixed vs position: device-fixed
<heycam> fantasai: why isn't position:fixed have the behavior of device-fied?
<fantasai> Rossen: We weren't actually resizing the viewport, it was an overlay UI
<fantasai> Rossen: e.g. keyboard uses semitranslucent colors
<heycam> fantasai: but what if you want to clearly see the content at the bottom of the page?
<heycam> Rossen: just dismiss the keyboard
<fantasai> fantasai: What if you need to type into a form field at the bottom of the page?
<fantasai> frremy: Then you can dock your keyboard.
<fantasai> dino: Do you still support device-fixed?
<fantasai> Rossen: yes
<fantasai> Rossen: We were doing this for action center, which is something that swipes from the right
<fantasai> Rossen: If you have some UI that's really important to your app
<fantasai> Rossen: you can attach it
<fantasai> myles: Does it work if the window is not full screen?
<fantasai> Rossen: No, this is only for full-screen
<fantasai> iank_: What is the box?
<fantasai> dino: In our case the device-fixed box would be what remains after the inset here.
<fantasai> iank_: But it wouldn't solve this use case?
<fantasai> dino: It would, but ti wouldn't solve use case of wanting ot fade all controls at once
<fantasai> iank_: What aobut tile shifting to the right?
<fantasai> dino: We'r ereserving the right ot put more things up there
<fantasai> dino: Would be up to browser to animate the the device-fixed box.
<fantasai> myles: Animation is different
<fantasai> myles: we want the animation to fade out
<fantasai> myles: whereas you want it to slide out
<fantasai> Rossen: You can fade out the keyboard or slide it?
<fantasai> myles: How does the page know to fade out or side out things?
<fantasai> dino: Say youtube uses a 3s fade, and we use a 4s fade.
<fantasai> dino: Wnat to tell youtube to use 4s if it wants to be in sync
<fantasai> fantasai: In Apple's case, could just use the transition time value in the 'transition' property
<fantasai> Rossen: Reason we wanted it done in browser was because syncing timers was not working
<fantasai> astearns: weirdly shaped things will need to use a lot of environment variables
<fantasai> dino: OK, we'll take back this feedback
<fantasai> fantasai: Also, you might want to consider s/fullscreen/overlay in the names... it's not really about the fullscreening
<fantasai> Rossen: If we are looking to solve the tying of author-defined controls with UA controls animation
<fantasai> Rossen: You can have a start and an end event
<fantasai> Rossen: Just also need to know how long between the two
<fantasai> myles: Could be part of the start event
<fantasai> astearns: Maybe you only need one set of environment variables