Some Unicode Emoji get clipped / distorted for Font-Size above 256px

Question

Apparently certain combinations of emoji and font-size, result in the emoji itself not rendering or rendering in a clipped/distorted fashion.

Yet its text-shadow, if set, will render correctly.

https://jsfiddle.net/0x2gqfyc/

<div style = "display:flex; flex-direction:column; gap:32px">

<div style = "display:flex; flex-direction:row; gap:32px">

    <div style = "display:flex; align-items:center; justify-content:center; font-size:300px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    🔔
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; width: font-size:256px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    🔔
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; font-size:258px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    🔔
    </div>
    
</div>

<div style = "display:flex; flex-direction:row; gap:32px">

    <div style = "display:flex; align-items:center; justify-content:center; font-size:300px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    🤫
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; font-size:257px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    🤫
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; font-size:258px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    🤫
    </div>
    
</div>

Tested on Chromium/Chrome/Edge 99. Is this a known issue? Is there any workaround?

(Font-Size limit being 2^8 pixels is kind of suspicious, but perhaps it's just a coincidence?)

Screenshots https://imgur.com/a/fJvrAGb