普通に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とかも試してみましたが、どれも消すことができませんでした。