【html】safariでvideoタグの上にかぶせてうまく表示できない件

Safariでvideoタグの上にかぶせてうまく表示できない件

HTMLでコーディングしていて、動画の上に別のタグを重ねるデザインを実装したところ、Safariでの表示に問題が発生しました。他のブラウザでは正常に表示されるのに、Safariだけ動画の裏側に要素が表示されてしまい、困っていました。

原因として、z-indexの問題か、Safariのレンダリング順序の問題かと考え、調べてみました。

その結果、以下のCSSを追加することで、重ねて表示できるようになりました。

----解決策----

transform: translateZ(1px); /* 回避手段 */

この方法で、Safariでも動画の上に要素を正しく重ねて表示できるようになりました。

コメント

このブログの人気の投稿

【iOS】SwiftでCGAffineTransformから角度・ラジアン・度数・スケールを計算する方法

【Android】WebViewのズームボタン(ピンチイン・ピンチアウト)を非表示にする方法

【iOS】UILabelでヒラギノフォントの上下が切れる問題と対処法