Weird line-break on special character

The problem

I recently discovered an encoding problem in my backend for when calculating the initials of a user when the first letter is germanic letter (e.g Ö and Ä). Those letters couldn't be parsed and ended up being a question-mark.

But what I also discovered is a rather peculiar behavior (and the reason I seek advise) in my markup that simply makes no sense to me whatsoever.

I've replicated simplified example below:

ul {
  padding: 0;
  display: flex;
}

li {
  list-style-type: none;
  font-family: 'Roboto', sans-serif;
  flex-direction: column;
  margin: 15px;
  width: 260px;
  min-height: 200px;
  padding: 30px 15px;
  text-align: center;
  background: white;
  border: 1px solid #E8E8E8;
}

.avatar {
  height: 35px;
  width: 35px;
  border: 2px solid #333;
  line-height: 35px;
  padding: 1px 2px;
  align-self: auto;
  margin: 10px auto 0;
  position: relative;
}

.avatar span {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

<ul>
  <li>
    <div class="avatar">
      <span>?N</span>
    </div>
    <h4>Örjan Norberg</h4>
    <span>orjan@example.com</span>
  </li>
  <li>
    <div class="avatar">
      <span>II</span>
    </div>
    <h4>Isaac Ibarra</h4>
    <span>isaac@example.com</span>
  </li>
  <li>
    <div class="avatar">
      <span>WW</span>
    </div>
    <h4>Wyatt Williams</h4>
    <span>wyatt@example.com</span>
  </li>
</ul>

You'll see that "Örjans" initials are ?N, but also that the "N" is being pushed down to the next line. This doesn't seem to be related to the avatar width because I tried with both long and short initials.

In fact, even if I put WWWWW or something else (pic) that overflows the avatar, there is no line-break which is as expected. I also tried other special characters, such as & and %, but those behave just as any other character or letter.

Question

What causes this behavior when using the question-mark specifically? Is it somehow related to the font (Roboto) or is it my css?

Also, (see pics below) how come this happens when the question-mark is followed by a letter, but not when the order is reversed (letter first) or when followed by another question-mark?

What's going on here??

EDIT 1: Using OSX/Chrome.v59, though can replicate in Windows7/IE11

EDIT 2: Apparently the — character also causes this behavior (thanks to @MrLister for finding this)