Desktop против Mobile Chrome рендеринг по-разному: после контента

Question

При той же разметке HTML / CSS3 рабочий стол правильно отображает псевдоэлемент в середине контейнера, тогда как мобильный Android 7.0 Chrome (той же версии 69.0.xxx) отображает элемент по-разному (= неправильно).Любые идеи, как сделать их таким же образом, не прибегая к взломам?

Теперь у меня есть хакер userAgent для проверки строки «Android» и с добавленным дополнительным классом, который немного меняет верхнюю позицию x-mark.Шрифт "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica" в обоих случаях. Head-tag имеет <meta name="viewport" content="width=device-width, initial-scale=1.0">

Код:

.input-container {
    display: flex;
    justify-content: center;
}

.clear-button {
    display: block;
    position: relative;
}

.clear-button:after {
        position: absolute;
        content: "\02DF";
        font-size: 80px;
        line-height: 80px;
        height: 53.33333px;
        top: 50%;
        transform: translateY(-50%);
    }

<div class="input-container">
  <div class="clear-button"></div>
</div>

Настольное изображение: desktop_render

Мобильное изображение: mobile_android_render