Picture: How ­ adds a hyphen in safari vs chrome
The problem is the extra hyphen after the period in the red square on safari side.
There seems to be a problem with the usage of ­ in Safari browsers and I'm not sure how to fix this. On some breaks where a ­ is used, I get another hyphen added after the broken word (as is seen in the linked picture). The issue only exists on mobile Safari browsers in places where the shy-ed word is encountering a break point (as in: an element with not enough width) without breaking, as far as I can see. Can someone please shed some light on why this happens and how one could fix it (except for using another ­)?
.foo{
width: 15px;
}<html>
<body>
<div class="foo">
<p>This­is­a­very­long­word­with­a­shy­breakpoint.</p>
</div>
</body>
</html>Edit: This question talks about the same issue, doesn't provide a solution for the safari problem, though. Edit2: Added Code snippet, though the reproducability is browser dependent.