CSS mask-image property not recognized

blackjersey · May 22, 2022, 5:17pm

Hi,

As the title says, the CSS mask-image property is not recognized by Bootstrap Studio. It shows as an invalid property. Is there a reason for this?

Thanks.

kuligaposten · May 22, 2022, 7:21pm

You can try this -webkit-mask-image: url(YOUR-IMAGE);

blackjersey · May 22, 2022, 7:47pm

Thanks. I tried that too but no go. Bootstrap Studio is actually saying it’s not a valid property. I mean, I can type the normal and webkit properties and I can test the mask-image property in my localserver just fine but Bootstrap Studio app itself is saying those are invalid properties.

DGDufi · May 23, 2022, 5:13am

The webkit works in preview, but BSS does not display it.
He writes an error on it

Preview:

BSS:

It would be good to use the webkit features. Will this be fixed in a future update? @martin

DGDufi · May 23, 2022, 5:14am

@blackjersey It is good that you mentioned this topic

blackjersey · May 23, 2022, 1:40pm

No problem. I think it is also noteworthy that the current CSS mask-image specs will only work in a localserver due to CORS. It will be great if we can reference a local file to use and preview it in BSS livepreview. I had to setup a separate localserver just so I can use a local file as an image mask.

martin · May 25, 2022, 12:54pm

Thank you for the report! The mask-image property is supported in Chrome only as -webkit-mask-image. Since Bootstrap Studio is built using Electron (which is basically a Chrome window), mask-image wont work in the app.

There was an issue that caused -webkit-mask-image to be shown as invalid, which we’ll fix in our next update.