Proposal: Transparent window
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Proposal: Transparent window
Another missing key feature of the web platform in comparison to native applications is the ability to create transparent windows. This issue aims to elaborate ideas on possible implementations of transparent windows. The goal is to provide a mechanism on how authors can create a transparent window effect resulting in the following:
Additionally, authors should then be able to, for example, set a transparent background-color and a backdrop-filter: blur() on the :root and/or <body> element to achive an effect like this:
An implementation of this feature would allow for a richer and more modern visual experience for users.
Possible implementation ideas
The following are possible ideas on how authors could be able to enable the transparent window effect:
- A new property in the viewport
<meta>tag, e.g.transparent-window=yes. - A new CSS property that is only valid in the
:rootand/or<body>element, e.g.window-transparency: transparent. - A new Web Application Manifest member, e.g.
"transparent_window": true, which would only be applied in the context of a standalone installed Progressive Web App.
Privacy implications?
A key concern here should be that there is no way for the website to view stuff underneath the window. However, since there is no way to read pixel data of the client's viewport in JavaScript, I do not think there are extra privacy implications to consider here.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read the proposal's three implementation ideas and its privacy section first. Compare the meta, CSS, and Web App Manifest approaches against the requested transparent and blurred :root/body effects; done means the platform mechanism and privacy constraints are resolved into an agreed specification.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100