Я получаю неприятные артефакты в мобильном сафари на обоих iPhone 4S и Gen-2 iPad при использовании стилей -webkit css для получения градиентного текста.Мобильный Safari -webkit-background-clip: текст; и/или CSS-градиенты текста в мобильном сафари
Это отношение CSS, применяется к текстовому элементу:
background-image: -webkit-linear-gradient(#eee 0%, #4a80e5 100%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#4a80e5));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Он хорошо выглядит в Chrome и Safari и не корректно в Firefox. Он плохо выглядит в мобильном Safari. Вы можете увидеть живой пример: http://www.synchronautapp.com
На мобильном сафари есть 1px-границы вокруг стилизованных элементов. Эти границы приходят и уходят в зависимости от того, насколько масштабируется пользователь. Пример здесь: http://synchronautapp.com/mkramer/IMG_0088.PNG
В Googling не было много подобных проблем. Что вызывает эту проблему, и есть ли способ обхода текста градиента? Есть ли чистый резервный план CSS для мобильного webkit?
Я частично смягчены этот эффект путем добавления 1px черные границы для этих стилей. Это раздражающий хак, который сбрасывает точность пикселей, и работает только тогда, когда я заранее знаю конкретный цвет фона. Это ни в коем случае не решение, но оно делает его лучше, чем раньше, поэтому я делаю это, пока не решит проблему. – masonk
3 года спустя .. это привело меня к сумасшествию, решив его, добавив границу и контур с цветом фона ... – webkit