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?
forever0714yuan
commented
1 month ago
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