-webkit css スタイルを使用してグラデーション テキストを取得しようとすると、iPhone 4S と gen-2 iPad の両方でモバイル サファリに厄介なアーティファクトが発生します。
これは、テキスト要素に適用される関連する 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
グーグルでは、同様の問題はあまり見つかりませんでした。この問題の原因と、グラデーション テキストを保持する回避策はありますか? モバイル Webkit 用の純粋な CSS フォールバック計画はありますか?