Bootstrap: Safari soft hyphenation bug: What’s going on?

[bjornte]

In this demo on JSFiddle, Safari exhibits a weird soft hyphenation bug when including Bootstrap's stylesheet. When ­ or ­ is preceded by the characters fi, a strange-looking character «Ṏ» (U+1E4E) shows up. I have even seen it with double umlauts:

Any ideas what’s going on? Safari supposedly supports ­.

This question was also posted on Stack Overflow.

[cvrebert]

Seems related to Helvetica Neue somehow. If I override the font-family to something else, the bug doesn't occur.

[cvrebert]

After boiling down the testcase, looks like the bug is only triggered when something is styled as:

font-family: "Helvetica Neue", Helvetica;
font-weight: 500;

(And of course the text needs to use soft hyphens and "fi" as you described.)
Simplified test: http://jsbin.com/paqovex/edit?html,css,output

The bug isn't specific to heading elements per se, it's just that some of Bootstrap's heading styles happen to result in this combination of styles.
Presumably the "fi" is triggering some ligature code in the font engine.

[cvrebert]

Apparently already fixed in WebKit Nightly at or before r198607:

[cvrebert]

For posterity, here's what the buggy rendering was:

[bjornte]

Thank you @cvrebert, I have updated also on Stack Overflow. If you want to «own» the answer there I can remove my quoted answer.