Does not work in Firefox at all

[alexey-milovidov]

98.0.2 (64-bit)
Mozilla Firefox for Ubuntu

[alexey-milovidov]

Is the typo in the article intentional?

I found a few really nice Houdini examples that use Pain API and decided to try to make something with it too.

[wjd3]

https://ishoudinireadyyet.com/

[alexey-milovidov]

Ok, understood.
Maybe it's possible to have a fallback to rounded corners? So the library will be readily usable across all browsers.

[PavelLaptev]

@alexey-milovidov it's possible to use a polyfill, but unfortunately it's now a 100% protection https://github.com/PavelLaptev/squircle-houdini-css#use-css-paint-polyfill

[bsimone]

Ok, understood. Maybe it's possible to have a fallback to rounded corners? So the library will be readily usable across all browsers.

You can use @supports

something like

  border-radius: 13px;
  @supports (background: paint(squircle)) {
     border-radius: unset;
     mask-image: paint(squircle); mask: paint(squircle); --squircle-radius: "13px";--squircle-smooth: 1;
  }

[saibotsivad]

Just some more info, as I poked around with it today.

I'm using Firefox 109.0.1 and it's failing in this css-paint-polyfill code:

function parseCss(css) {
	let parent = styleIsolationFrame.contentDocument.body;
	let style = document.createElement('style');
	style.media = 'print';
	style.$$paintid = ++styleSheetCounter;
	style.appendChild(document.createTextNode(css));
	parent.appendChild(style);
	style.sheet.remove = () => parent.removeChild(style);
	return style.sheet;
}

It's throwing an error at the style.sheet.remove line, saying that style.sheet is undefined which doesn't make sense to me.