4
3

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 5 years have passed since last update.

iOSでvideoタグの周りに枠線がつく問題の対応

Last updated at Posted at 2018-08-09

普通にvideoタグをplaysinlineで入れただけなのに、なぜか周りに枠線がついていた問題の対処方法です。
iOS 11.3のiPhone 8 PlusのSafariで発生した現象ですが、同じバージョンで同じモデルの別端末ではこの現象が発生せず、端末によって現象が変わるようです(何が違うのかは謎)。

今回僕が対応した方法としては、以下のようにcss filterのdrop-shadowをつけたことで線を消すことができました。
この設定は実際は何も変わりませんが、要素の周りのスタイルを変える設定なので、その影響で線が消えたのだと思います。

video {
  filter: drop-shadow(0px 0px #000);
}

CodePenにfilter前と後のものを置いたので、もしこの現象が発生する場合はこれで確認してみてください。

See the Pen gjQqvb by TakanoriOnuma (@wintyo) on CodePen.

ちなみにoverflow: hiddenとかbox-shadowとかoutlineとかも試してみましたが、どれも消すことができませんでした。

4
3
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
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?