Hanzi Writer renders incorrectly inside an Observable notebook on a mobile browser

The problem is that Hanzi Writer uses local fragments for the clip mask (e.g., clip-path="url(#mask-19)") and Safari has a bug where a base element prevents these local fragments from being resolved correctly. Observable uses the base element so that relative links in Markdown work as expected.

Normally, the solution here would be to use an absolute path instead (clip-path="url(${window.location}#mask-19)"), or better, to use DOM.uri as shown here. However, since Hanzi Writer is generating this SVG, it’s not easy to fix.

1 Like