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.

Sign up for GitHub

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

Jump to bottom

Proposal: Transparent window #7281

Open
BenjaminAster opened this issue May 17, 2022 · 6 comments
Open

Proposal: Transparent window #7281

BenjaminAster opened this issue May 17, 2022 · 6 comments
Labels
css-backgrounds-4

Comments

@BenjaminAster
Copy link

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:

a browser window with a completely transparent background

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:

a browser window with a darkened, blurred background

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 :root and/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.
@jDavidnet
Copy link

The browser could compute the colors in 'alpha-space' and then let the browser do the final composite with the background. This way, when the browser tries to inspect a pixel color or snap a screen shot, it would compute an alpha channel version of that pixel or image.

If you were, say, using Canvas then any images produced could be a transparent PNG or transparent JPG. Only the browser's final render would have access to the final composite and display output.

You could also have the min-blur be a global browser setting, so pages would never be able to drive a 'desktop-replacement' sort of look.

@andreamorales
Copy link

Just here to say that even though this was from a long time ago, I'd be all about it.

@Loirooriol
Copy link
Contributor

It seems pretty bad that the text may be unreadable if the user is using a wallpaper with the same color the author chose for the text.

@zaygraveyard
Copy link

@Loirooriol I believe that's a problem for the page's designer to solve and not a strong enough argument against this proposal.

@Loirooriol
Copy link
Contributor

The page designer can't solve it well without having access to the underlying data which obviously can't happen.
And designers won't try with all possible wallpaper combinations, so the ones who will suffer will be the users.
Have you seen the image at the top? Completely unreadable.
So I don't see how this would "allow richer and more modern visual experience for users", IMO it's just worse for the user.

@kizu
Copy link
Member

kizu commented Oct 19, 2024

I don't think it is safe to allow the complete page transparency. A malicious actor could use it to fake OS UI and easily overlay them on top of the desktop/other windows.

If something like this was to be implemented, there should be a certain level of opaqueness required that would guarantee that the content is at least partially obscured and/or blurred, with the User Agent deciding how exactly this should look (overlay? blur? something else?).

And, of course, it would need to follow the “reduced transparency” setting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-backgrounds-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@kizu @jDavidnet @zaygraveyard @fantasai @Loirooriol @andreamorales @BenjaminAster