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

Issue: Inconsistent CSS border-image behavior with dom-to-image #481

Open
1 task
sonion028 opened this issue Sep 14, 2024 · 1 comment
Open
1 task

Issue: Inconsistent CSS border-image behavior with dom-to-image #481

sonion028 opened this issue Sep 14, 2024 · 1 comment

Comments

@sonion028
Copy link

border-image: linear-gradient(to bottom, transparent 20%, #f9d3e3, transparent 80%) 1;
在浏览器中这么用css时,表现是正确的,但在用dom-to-image时会自动添加:-webkit-border-image: linear-gradient(rgba(0, 0, 0, 0) 20%, rgb(249, 211, 227), rgba(0, 0, 0, 0) 80%) 1fill / 1 / 0 stretch; 的兼容性写法,但有多了 “fill” 参数,使表现不一致

When using the following CSS in the browser, the behavior is correct:

border-image: linear-gradient(to bottom, transparent 20%, #f9d3e3, transparent 80%) 1;

However, when using dom-to-image, it automatically adds the compatibility style:
CSS
-webkit-border-image: linear-gradient(rgba(0, 0, 0, 0) 20%, rgb(249, 211, 227), rgba(0, 0, 0, 0) 80%) 1 fill / 1 / 0 stretch;

The added fill parameter causes inconsistent behavior.

I tried to override the default -webkit-border-image with the following styles, but it didn’t work:
CSS
-webkit-border-image: linear-gradient(to bottom, transparent 20%, #f9d3e3, transparent 80%) 1;
or
CSS
-webkit-border-image: linear-gradient(rgba(0, 0, 0, 0) 20%, rgb(249, 211, 227), rgba(0, 0, 0, 0) 80%) 1 / 1 / 0 stretch;
or
CSS
-web-border-image-slice: 1;
Currently, -webkit-border-image compatibility is good. Can we remove the -webkit-border-image style? Or is there a way to configure it?

Browsers

  • Chrome 127+
@forever0714yuan
Copy link

forever0714yuan commented Sep 14, 2024 via email

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

No branches or pull requests

2 participants