Or, it could be that out of all system fonts on MacOS, only Noto Nastaliq Urdu has a glyph for the bismillah, and thus the system uses it as a fallback...
In your iMessage screenshot, this character is being rendered in Noto Nastaliq Urdu[1], which is a font that uses the nastaliq flavor of the Arabic script (as compared to the more widely used naskh flavor, which you're most probably seeing in Chrome's rendering).
What's curious to me is that Apple only uses Noto Nastaliq Urdu if Urdu is enabled in preferred languages and is higher than any other Arabic-script language. [2] Is that so on your machine?
The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it.
Are you using Firefox? I see the same black box in Firefox too (which is actually an SVG inside an <img> tag), but in Chrome, it renders fine: https://imgur.com/a/NdvKN
Google's announcement [1] about OT font variations mentions that a CSS proposal is in the works:
> Together with other browser makers, we’re already working on a proposal to extend CSS fonts with variations. Once everyone agrees on the format, we’ll support it in Google Chrome.
The same is true for Urdu as well, so if you want to distinguish Urdu from Persian: look for a backward moving (i.e. towards the right) horizontal stroke at the end of a word. This stroke will always run under the preceding letters of the word, except that some dots of the preceding letters may be moved beneath the stroke in order to avoid collision.
Or, it could be that out of all system fonts on MacOS, only Noto Nastaliq Urdu has a glyph for the bismillah, and thus the system uses it as a fallback...