Auto-hyphen rendering issue on Chrome with macOS Monterey

[tw77]

Description

When using Chrome after updating to macOS Monterey, and when viewing a webbook that uses the McLuhan, Asimov, Baker, or Pressbooks Custom CSS theme, the hyphens that automatically break up words at the right margin of a paragraph do not render properly. These hyphens just appear as empty squares.

This is affecting a user here: https://pressbooks.zendesk.com/agent/tickets/8091

Steps to Reproduce

1. Update to macOS Monterey (this bug does not appear on macOS Big Sur)
2. View or create a book with the McLuhan, Asimov, Baker, or Pressbooks Custom CSS theme (all other themes are unaffected by this bug)

Expected behavior: A longer word at the edge of the right margin of a paragraph will be automatically broken up by a hyphen and continued on the next line.

Actual behavior: The word is broken up and continued on the next line, but the hyphen doesn't render. An empty square is displayed instead of the hyphen.

[LeighKP]

Just found an instant of this in the User Guide and thought I'd add a screenshot.

[tw77]

I’ve noticed this auto-hyphen rendering bug on two different websites, and I see that it’s now a known issue with Chromium-based browsers including Google Chrome. It only happens on macOS Monterey. Reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=1267606

The patch for this bug will be included in Chromium 98 which is due for release on Feb 1st, 2022. So in the near-future, updating Google Chrome should be sufficient to do away with this issue. But there's also an effective workaround noted in this blog post, which is the following CSS code:

html {
    -webkit-hyphenate-character: '-';
}

Adding this code to a book (under Appearance > Custom Styles, in “Your Web Styles”) gets the auto-hyphens to appear normally on Chrome while running macOS Monterey and viewing books with the affected themes:

Before:

After:

(Adding this code should have no consequence for browsers and operating systems that aren't affected by the bug. After viewing this test book with Chrome + macOS Monterey, I opened it with Firefox, then Chrome + an earlier macOS, where it continued to render correctly.)