Safari hyphenation bug

Question

During one of my latest coding sessions I've encountered a weird problem with hyphenation in Safari browser when selecting text.

It only happens to word that is hyphenated but can potentially fit whole on next line.

Here is a playground I've prepared for debugging (not that it helped me much).

Steps to reproduce:

1. Open this pen in Safari
2. Highligt text in gray box
3. Observe the weirdness
4. Look for solution

const resetButton = document.getElementById('reset');

resetButton.addEventListener('click', function() {
  let textElement = document.getElementById('text-block');
  textElement.remove();
  
  let div = document.createElement('div');
  div.textContent = 'asdasas asdasdugas';
  div.id = 'text-block';
  
  document.getElementById('wrapper').prepend(div);
});

#text-block {
  -webkit-hyphens: auto;
  margin: 0 auto;
  display: block;
  background-color: #dedede;
  width: 100px;
}

button {
  display: block;
  margin: 0 auto;
}

<div id="wrapper">
  <div id="text-block">
    asdasas asdasdugas
  </div>
</div>

<button id="reset">reset</button>

• Please the code was prepared really quickly and in a rush so I don't burn much time on it. So I know there is about a million better ways to write it.

Thanks for every help that I will be able to get and I hope this thread will help others as well.