Hi there,
I have been experimenting the Hanzi Writer inside an Observable notebook. So far so good on a desktop browser. Everything seems to be fine. Here is a sample notebook I just created to repro this issue:
However, when I open the notebook on a mobile browser (tried both Safari and Chrome on iOS), the strokes are rendered with extremely thickness (see below).
The strokes can be rendered correctly on Hanzi Writer’s website itself:
BTW, I happened to see Mike has also created a notebook for Hanzi Writer. But it seems to have the same problem on a mobile browser:
What could be wrong?
Thanks!
-Yutao
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
Here is a patched version of Hanzi Writer that works around the Safari bug:
2 Likes
Wow~ worked like a charm! Thanks so much @mbostock!!!
I just pushed Hanzi Writer v1.3.1 with this fix. Thanks @mbostock! I tweaked it slightly to something like url(${window.location.href.replace(/#[^#]*$/, '')}#mask-19)" since it seems that if the page URL already has a # in it, then just using window.location breaks. Let me know if you still see this issue in v1.3.1.
3 Likes
Thank you, @chanind! I removed my workaround, but you can find it here for historical purposes.
@chanind That’s awesome! Thanks for the quick fix!
