Skip to content

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

@sonion028

Description

@sonion028

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+

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions