[Bug]: Enabling Vibrancy and backdrop-filter blur doesn't render properly #39529
Comments
|
Hello @RoyalFoxy. Thanks for reporting this and helping to make Electron better! Would it be possible for you to make a standalone testcase with only the code necessary to reproduce the issue? For example, Electron Fiddle is a great tool for making small test cases and makes it easy to publish your test case to a gist that Electron maintainers can use. Stand-alone test cases make fixing issues go more smoothly: it ensure everyone's looking at the same issue, it removes all unnecessary variables from the equation, and it can also provide the basis for automated regression tests. Now adding the
blocked/need-repro
|
|
https://gist.github.com/RoyalFoxy/50b890de9e9fdadf098e8594877f0ade Also found out that any text, not just absolutely positioned one is affected... |
|
@RoyalFoxy Oh my god how did you find this bug?! I was wondering my CSS wasn't working and I noticed a difference when I turned vibrancy off in Obsidian. |
|
This bug is already there since a handful of versions, Im not the first one to notice and report it. It just never got worked on and the issue created for it suddenly dropped out of the range of supported versions so I created this new issue and I will continue doing that until its fixed because my vscode looks inconsistent in its current state |
|
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment! |
|
Yes this bug still affects me or us. |
|
Also affected. |
|
I've tested my previous fiddle with the latest versions of 26, 27, 28 and alpha 29 and all are also affected. I have also changed the vibrancy to "fullscreen-ui" as "dark" is deprecated and there is no change. Would be very much appreciated if this gets fixed/worked on |
|
Mainly as a reminder, this is still an issue. Even if it's not something very critical, I think it would be still a very good thing to fix as it would allow having apps feel even more native as pure native apps on windows and macos already support having the main app window be blurred and having blurred elements. I fully understand that there's very likely more pressing features and bugs to be worked on and I'm very glad Electron gets all the updates and gets actively worked on! And I would totally try and implement this myself if I knew anything about the codebase at all... EDIT: |
|
This should be considered as a major bug. |
|
@mattpark01 I totally agree with you on this one. I'm quite sad my issue has been open since last august and I'm by far not the first one to open an issue for this, the one I can remember just fell out of scope for supported version. Iirc it was opened in 2019... So it's been a bug for many years now :/ |
|
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment! |
|
bump |
|
Still affected |
|
Tested it with the newest version of electron 31 and the newest alpha 32 and both don't work |
Preflight Checklist
Electron Version
25.5.0
What operating system are you using?
macOS
Operating System Version
macOS sonoma 14
What arch are you using?
arm64 (including Apple Silicon)
Last Known Working Electron version
No response
Expected Behavior
Have an electron application with vibrancy enabled. Get some text or other element absolutely positioned and add another element with both a transparent background and the backdrop-filter set to blur(10px) (or any value). This should just have the text in the background render blurred.
Actual Behavior
However the text in the background gets blurred and not at the same time. An example can be found under the additional informations section
Testcase Gist URL
No response
Additional Information
I have used the latest bleeding edge version of vscode for this using the vibrancy extension to add vibrancy to vscode. As you can see I added the background color and the backdrop-filter and it produces a weird effect.
I also tried this in plain html and chrome (minus the vibrancy of the browser of course) and it works as expected.
This seems to also affect other operating systems as well. I sadly cannot test it myself but I saw that another issue that tackled the same bug as I do here (that issue now has an unsupported electron version) had reports from both windows and macOS. This is the issue I referenced.
The text was updated successfully, but these errors were encountered: