Flexbox не работает правильно на iPad 3 с Safari

Question

У меня проблема с моим flexbox.Когда я в Chrome или любом другом браузере, все работает нормально.

Но когда я на iPad 3 с Safari, мой flexbox работает неправильно.Я использовал -webkit-, но он все еще не работает.

img должен быть в абсолютном положении, потому что в противном случае ссылка получает высоту img, которая в противном случае разрушает всю мою навигацию.

Как вы можете видеть на картинке, значокбольше не центрируется, поэтому align-items не работает:

И вот как это должно выглядеть:

Так как я могу это исправить?

li {
    display: inline-block;
    font-size: 14px;
    padding: 5em;
}

a {
    padding-right: 46px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

a img {
    width: 35px;
    height: auto;
    position: absolute;
    right: 0;
}

<li>
<a href="https://www.google.de" aria-current="page">Max Mustermann
  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png" class="avatar avatar-70 photo wpfla round-avatars " width="70" height="70">
</a>
</li>

Answer 1

Использовать ниже CSS для align-items

align-items: center;
-webkit-align-items: center;

li {
    display: inline-block;
    font-size: 14px;
    padding: 5em;
}

a {
    padding-right: 46px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

a img {
    width: 35px;
    height: auto;
    position: absolute;
    right: 0;
}

<li>
<a href="https://www.google.de" aria-current="page">Max Mustermann
  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png" class="avatar avatar-70 photo wpfla round-avatars " width="70" height="70">
</a>
</li>