Different browsers allow different amounts of emoji characters in a maxlength field

I'm trying to make an html input field that matches the database limit of 100 characters. I have a utf8mb4 database to support emoji, however the problem is the browser and database all count the length of emoji differently.

The emoji is the codepoint U+{1F600}.

• The db will count this codepoint U+{1F600} as 1 entry. So I could fit 100 in a db entry.
• maxlength in Safari computes the single codepoint, "" == 1. So I could enter the expected 100.
• maxlength in Chrome counts the surrogate pair U+D83D, U+DE00 since the original codepoint is greater than 2 bytes, "" == 2. So I could only enter 50 in my form.

Given that different browsers treat emoji with different lengths with respect to a form's maxlength attribute, what would be the cleanest way to accept a max of 100 emojis in a form across browsers?