2
私はこの謎を解くのに苦労しています。私は "ノックアウトテキスト"エフェクトを作成し、次のようにセパレータを追加しました。 iOS（10.3.2）のSafariを除いて、私が試したすべてのもので素晴らしいです。iOS上のSafariで、背景クリップとテキスト塗りつぶしの色をいくつかの擬似要素と組み合わせて使用してもテキストが表示されない
Link to fiddle壊れた一時的な修正です。
h2.gradient {
color: #013c65;
font-weight: 600;
text-transform: uppercase;
font-size: 2em;
line-height: 1em;
background: linear-gradient(1deg, #800909, #332222);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-ms-background-clip: text;
-ms-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
h2.gradient:after {
content: '';
position: relative;
display: block;
height: .12em;
width: 2.5em;
background-image: linear-gradient(1deg, #800909, #332222);
top: .5em;
}
問題がbackground-clip: text;、text-fill-color: transparent;を組み合わせることで、擬似要素であると思われるようになっていますdisplay: block;。
私は、擬似要素をインラインブロックで絶対位置指定して表示することができます。当分の間、私は<div class="special-heading">のヘッダーを折り返し、divの後に区切り文字を追加しました。
iOSでこれが気に入らない、または他の誰かに同様の問題が発生した理由はありますか？私はゼロ幅のスペースを追加すると、魔法のように​が動作することがわかりました。
私はMacのWebインスペクタを開いて元のメソッドを時々動作させることができるので、バグかもしれないと思っています。
あなたの考えをありがとう！
私も同じ問題と私のために修正問題を抱えています。 –
はい、テキストクリッププロパティには多くのデバイスにバグがあります。私はアンドロイドデバイス（それが働いていた他の多くのアンドロイドデバイス上にある）で、私はボタンタグに同じものを使用し、動作しませんでしたが、divタグでうまくいきました。 h2タグをdivに変更してみてください。それがうまくいくならば、そのバグです。 –