Move backdrop filter to a canvas based solution #6262
Conversation
There was a problem hiding this comment.
Hmm, all tonality seems to be lost
Before:
After:
Once the blurred avatar appears it looks very different to how it used to
Before:
After:
If you enable the spaces beta at least some form of split appears but it still looks very different to the intended (as designed look)
Removing my avatar does not update the blur at all, so it remains as the old avatar.
With a light avatar it makes it obvious the tonality is missing, looks almost identical to not having an avatar at all.
|
This also makes resizing the room-list a bit less performant on FF :( |
…rop-filter * origin/develop: (1278 commits) Add a little padding Keep number field in focus when pressing dialpad buttons (#6520) Remove old version Fix video call persisting when widget removed Update link to matrix-js-sdk CONTRIBUTING file (#6557) $toast-bg-color -> $system $system-... -> $system Iterate PR based on feedback Remove unnecessary code Use AccessibleTooltipButton Just upload the PR object itself Edit PR Description instead of commenting publish the right directory Fix Netflify builds from fork PRs This doesn't need to be here as it was moved into CallViewButtons Make scrollbar dot transparent Iterate PR based on feedback Don't set hidden RRs labs setting at account level Add a comment for weirdly placed div Add full class names to animations.scss ...
fixed! |
|
The first issue seems to still happen :( |
still hasn't deployed, give it a few minutes. 😄 |
|
How do you know if it works? The preview opens in the browser, but the issue is with the desktop app. Also if a bloody backdrop causes blurry text, remove the backdrop! Who gives a toss about some backdrop if it makes text illegable? Seriously, what manner of importance did this backdrop have to prioritize it over legible text?! I say just remove the backdrop. It'll make this part of the app a hundred times simpler, text won't become blurry, and there will be no performance problems. |
@thany the problem isn't with desktop app only, it's with chrome fonts rendering when layers are changed and too much of the application gets rerasterized. The desktop application is just a chrome wrapped in a nice package with some better, native APIs. Could you try verifying yourself that fonts are more readable now on netlify deployment? Please be wary that there's one more bug that breaks the rendering, but you can "fix" it by clicking the + button in the top left corner. We're currently figuring out how to make this all work together without getting rid of this simple Call To Action there. In terms of removing the backdrop: that was the first thing I suggested, as the previous backdrop solution (css-only based) was notoriously buggy, but turns out it's a quite relevant feature for application identity, even though it seems like a very minor thing. It's best that we have found a solution that works, is performant and gives you even better experience than before. 😄 If you have any more questions about the decisions made here we can either continue in the linked issue so we don't add not related to the PR comments here, or you can catch me on matrix in the Element Web/Desktop room, or @Palid:matrix.org . |
…rop-filter * origin/develop: (43 commits) Update copy to indicate debug logs contain which UI elements you last interacted with Fix name of Netlify workflow Add type declarations Fix pagination and improve typing Fix import Reset matrix-js-sdk back to develop branch v3.28.1 Prepare changelog for v3.28.1 Upgrade matrix-js-sdk to 12.3.1 Explicitly handle first state change Properly listen for call_state Proper init in constructors Resetting package fields for development v3.28.0 Prepare changelog for v3.28.0 Fix error on accessing encrypted media without keys Fix call tile buttons Upgrade matrix-js-sdk to 12.3.0 Remove test code; good job we have tests Fix dates ...
Palid
dismissed
t3chguy’s stale review
Problem has been solved already, and re-review isn't necessary in this case.
|
Comparative screenshots between app/develop now this has been merged: Before: After: |
|
@dbkr the calls are now aligned left for a reasons fortunately not related to this one (the new |
That is an intentional change
That is probably unrelated, I've played with a few numbers there, so I think it's unrelated |
After many issue with the backdrop filter having glitches on hover and sparse browser compatibility. This is an attempt to move this implementation to a canvas
This introduces a polyfill for
CanvasRenderingContext2D.filterso that Safari can display the image with the correct blur valueReference values: https://web-ui-d998d9.webflow.io/
Rendering examples:
Dark theme:
https://cln.sh/gx3s3X51UeT8HALlD38b Amandine
https://cln.sh/FT0bYIZoxD12I7gDY8HR Matthew
https://cln.sh/rCaxgIGC1igFjwdHD6B0 Ben
https://cln.sh/ZB23KitwV5RZIwxCHrZU Nad
https://cln.sh/NRn4KQEfX62FdUHS5Ti5 Banana
https://cln.sh/RAG9n0yFPSUAEfUupF5L Vertical rainbow
https://cln.sh/1pzKtaTIlBpQjpL2aGb5 Horizontal rainbow
Light theme:
https://cln.sh/5tUWPe0M3crsnLKxB9VM Amandine
https://cln.sh/LT4weX5qPFuQjtQHkJpf Matthew
https://cln.sh/VZkGthQkbYLv2wKsIGmV Ben
https://cln.sh/AJyQ2ptfxhHfvOWJCt0f Nad
https://cln.sh/9z0Y8cdcWrpeElTUrkRN Banana
https://cln.sh/ovDie7SxIrrRvsJszWtD Vertical rainbow
https://cln.sh/B7tgvFrxDtLE99JK87ai Horizontal rainbow
This PR currently has no changelog labels, so will not be included in changelogs.
Add one of:
T-Deprecation,T-Enhancement,T-Defect,T-Taskto indicate what type of change this is plusX-Breaking-Changeif it's a breaking change.Preview: https://611df9c6fbab22b2d967978d--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.