Question

我想为我的网页制作一种3D房间效果。为此我在css中创建了一个3D立方体，它在所有浏览器中都能正常工作。我的3D立方体有一个黑色的顶部和底部。左，右和后侧都有透明的背景。

以下是我的HTML设置：

<div class="room-container">
    <div class="video-background" id="room">
        <video class="bg-vid" autoplay preload="none" loop mute> 
            <source src="http://www.weichieprojects.com/demo-vid.mp4" type="video/mp4">
        </video>
    </div><!-- ./video-background -->

    <div class="scroller">
        <div class="room">
            <div class="room-side room-side-top"></div>
            <div class="room-side room-side-back"></div>
            <div class="room-side room-side-left"></div>
            <div class="room-side room-side-right"></div>
            <div class="room-side room-side-bottom"></div>
        </div><!-- ./room -->
    </div><!-- ./scroller -->

    <div class="homepage-content text-center">
        <div class="inner">
            <h2>OPEN THIS PAGE IN SAFARI</h2>
            <h1>z-index buggy</h1>
            <h1>on safari and IE/Edge.</h1>
        </div><!-- ./inner -->
    </div><!-- ./homepage-content -->
</div><!-- ./room-container -->

如果您查看我的codepen（https://codepen.io/weichie/pen/GOVZQp），您将看到多维数据集背后的视频背景。除非你在Safari中打开笔。

有关如何修复Safari视频背景的任何想法？没有视频，它在Safari中也可以正常工作。

我有一个橙色背景的div.room容器，我给了＆lt;视频＆gt;粉红色的背景。如果您从我的代码中删除此行：

<source src="http://www.weichieprojects.com/demo-vid.mp4" type="video/mp4">

你会看到粉红色的背景。（所以＆lt; video＆gt;正确地放在我的立方体后面）如果你也删除了视频标签，你会看到立方体后面的橙色背景。

所以它非常奇怪（我认为）只有涉及到视频时，Safari才会将视频放在我的立方体前面。但是..文本保留在视频前面。这就是为什么我认为它是我的3D对象的z-index问题？

非常感谢！ Here's an image on how my page should look

Safari z-index错误与视频和3D对象

0 个答案: