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.

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

feat: support mix-blend-mode #544

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Jackie1210
Copy link
Contributor

@Jackie1210 Jackie1210 commented Sep 17, 2023

Close #493

Here I just use inline style just like filter in satori to reduce result size and rely on the powerful resvg. It needs to upgrade @resvg/resvg-js to 2.4.1 to support mix-blend-mode. However, it casues two tests fail which were okay before.

You can track them here:

thx/resvg-js#256
thx/resvg-js#257

After @yisibl and @RazrFalcon checked and resolved them. I think we can merge this PR.

@vercel
Copy link

vercel bot commented Sep 17, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
satori-playground ❌ Failed (Inspect) Sep 17, 2023 5:38am

@Jackie1210 Jackie1210 marked this pull request as draft September 17, 2023 05:37
@Jackie1210
Copy link
Contributor Author

cc @shuding

Copy link

@orca-security-us orca-security-us bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Orca Security Scan Summary

Status Check Issues by priority
Passed Passed Secrets high 0   medium 0   low 0   info 0 View in Orca

@Jackie1210
Copy link
Contributor Author

Jackie1210 commented Sep 17, 2023

Oops! Deploy failed. Is it the reason that i upgrade the pnpm? @shuding

@Jackie1210
Copy link
Contributor Author

Oops! Deploy failed. Is it the reason that i upgrade the pnpm? @shuding

#552

@Jackie1210
Copy link
Contributor Author

Jackie1210 commented Sep 20, 2023

The solution of mix-blend-mode is lazy way because it relies on the browser and resvg implement the specific feature. I have to find a common way to workaround BackgroundImage and BackgroundAlpha in svg so that we can support similar css feature such as backdrop-filter, mix-blend-mode. Let me exp it again 😂

@RazrFalcon
Copy link

@Jackie1210 mix-blend-mode is broken is Safari and BackgroundImage/BackgroundAlpha isn't supported by browsers and most libraries. Welcome to SVG.

@Jackie1210
Copy link
Contributor Author

@Jackie1210 mix-blend-mode is broken is Safari and BackgroundImage/BackgroundAlpha isn't supported by browsers and most libraries. Welcome to SVG.

hhh, I agree with that. But I do think it has a hack way to workaround with BackgroundImage / BackgroundAlpha, just a bit complicated to give it a try in satori

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support mix-blend-mode
2 participants