スマホでテキストをドラッグすると消えてしまいます。

Question

詳細
以下のリンク先のサイトのスマホ表示のときに、参考画像の矢印の部分をスクロールするためにドラッグするとテキストが消えてしまいます。どうすれば消えないようにできるでしょうか？

問題のサイト
http://wonect.com/

参考画像

よろしくお願いします。

Answer 1

捕まえたときのopacityが影響してそうですね。
スマホ用のspan.sub-headlineにopacity: 0.99999;かposition: relative;などを追加すると解決するかと思います。

Comments

[h-o]

返信をいただき誠にありがとうございます。

スマホ特有の挙動のためか解決策が見つからず困っていたところ、大変助かりました。
方法については、position だとレイアウトに影響がでそうなためopacityを設定する方法でうまくいきました。

[gin]

これはスマホ特有ではなく、opacityの挙動によるものです。
https://www.w3.org/TR/css3-color/#transparency

簡単に言うとopacityが1未満になるとz-indexのような重なりができます。
今回は下のテキスト要素をネガティブマージンで画像の上に持ってきています。
この画像をhoverしたときににopacityが付き重なりが発生し、画像がテキスト要素より上になります。
これにより文字が消えたように見えたのです。
これを回避するためにテキスト要素にも1未満のopacityなどを付与する必要があったというわけです。