Подтвердить что ты не робот

IOS 9 iPad воздушный текст-теневая рендеринг артефакты

С html следующим образом:

<h1>Lorem ipsum Incididunt minim enim pariatur ex in irure Duis deserunt.</h1>

И css:

h1 {
  color: #fff;
  font-size: 4em;
  font-family: sans-serif;
  text-shadow: 2px 2px 8px #000;
}

Я получаю некоторые нечетные теневые артефакты в рендеринге на iOS 9.3.2 на iPad (1 и 2). Проблема не была воспроизведена на iPad mini 1 или 2 или на iOS 10.1.

Я экспериментировал с изменением шрифта, высоты строки, альфа-прозрачности в тени и т.д.... и преступник, кажется, просто использует любую тень текста с сырым элементом h1 (и я принимаю другие элементы). Кажется, что проблема легче воспроизвести, когда размер шрифта больше, а цвет текста белый, но определенно существует только свойство теневого тэга (возможно, потребуется немного увеличить масштаб и уменьшить его, чтобы воссоздать его).

Проблема, зафиксированная на снимке экрана, довольно незначительна, но с разными размерами текста и шрифта иногда бывает намного хуже.

Есть ли у кого-нибудь информация о первопричине? Кто-нибудь знает, что именно влияет на версии устройств /os? Кто-нибудь знает какие-либо хорошие способы решения проблемы?

jsfiddle: https://jsfiddle.net/t7ccn528/

ipad render artifacts

4b9b3361

Ответ 1

Попробуйте сделать позицию h1 равной или абсолютной (какая из них подходит для ее размещения в дереве). Затем добавьте верх: 0;

Также попробуйте:

Погрузитесь с CSS-свойствами, сглаживающими шрифты, на H1, особенно подпиксельно-сглаженные. Попробуйте эти два отдельно и вместе. Я не могу реплицировать свою VM-браузеру, иначе я мог бы это выяснить.