1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSでリンク要素a:activeにopacity:0を指定すると iOS13では遷移しない?から注意

Last updated at Posted at 2019-10-07

マウスオーバー、タップ時に透過の演出するため、以下のような記述をしていた

<a href="http://example.com" ontouchstart="">
  <img src="https://placehold.jp/150x150.png" alt=""/>
</a>
a{opacity:1}
a:active{opacity:0}

iOS12以前の端末は、問題なくスタイルやリンクが効いていたが
iPhoneXs iOS13.1.2の実機 Safari Chromeで確認したところ、
タップしても透過0になるだけで指定したリンクへ遷移できなかった。
(一部分をタップすると効いた箇所があったので、リンクのエリアが小さくなってる???)
(画像とテキストで挙動が違う???)

サンプル
https://codepen.io/ofujiii/pen/RwwNPXa

対策としては
iOS13の場合はスタイルを効かせないという暫定的な対応しかできませんでした...
iOS13は公開したばかりで、バグが多数あると報告されているので、
修正されることを期待しつつ、
もし解決方法を知っている方がいればご教授いただきたいです

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?