safe-area-max-inset-* variables

[vmpstr]

こんにちは TAG-さん!

I'm requesting a TAG review of safe-area-max-inset-* variables.

This proposal adds safe-area-max-inset-* variables that have the value of the max possible value of the safe-area-inset-* variables. This can be used to create a different effect (a bottom bar that slides) while still respecting the safe area insets and while remaining composited.

See further discussion on: w3c/csswg-drafts#11019

• Explainer¹: due to a fairly minor addition to the existing specification, I hope that a short inline explainer suffices:

This proposal builds upon the safe-area-inset variables specified here https://drafts.csswg.org/css-env-1/#safe-area-insets. The safe-area-inset variables can dynamically change based on the device, which can require relayout or in some cases jittery appearance. There are some efforts to be able to composite such changes, but it isn't easily possible in all cases. With that, we propose adding safe-area-max-inset-* set of properties that represent the maximum value that the safe-area-inset-* variables can take. These are static and do not change on the device, which allows developers to reliably use the variables to create smooth and fast effects like bottom-bars that slide down as the safe-area-inset-* changes (as an example).

• Specification: https://drafts.csswg.org/css-env-1/#safe-area-max-insets
• WPT Tests: pending
• User research: N/A
• Security and Privacy self-review²: N/A
• GitHub repo:
• Primary contacts:
  • @flackr (Google, author)
  • @bramus (Google, author)
  • @vmpstr (Google)
• Organization/project driving the specification: Google
• Multi-stakeholder support³:
  • Chromium comments: N/A
  • Mozilla comments: safe-area-max-inset-* variables mozilla/standards-positions#1171
  • WebKit comments: safe-area-max-inset-* variables WebKit/standards-positions#454
• Status/issue trackers for implementations⁴:

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• Previous early design review, if any: https://github.com/w3ctag/design-reviews/issues/####
• Relevant time constraints or deadlines:
• The group where the work on this specification is currently being done: CSSWG
• The group where standardization of this work is intended to be done (if different from the current group):
• Major unresolved issues with or opposition to this specification:
• This work is being funded by:

[xiaochengh]

We're happy with this. But please put this text you've written either in a separate explainer doc https://w3ctag.github.io/explainers/ or in the spec itself.