Question

所以我有一个应该垂直居中的介绍动画。

我使用top:50%和translateY来居中。在Safari中，在使用％进行翻译后，视频顶部会出现黑线。如果我使用例如translateY(-200px)，则不显示该行。

在chrome＆amp;火狐，它似乎很好，并没有出现这条线。

此处有一个示例：http://www.scoutsoverijse.be/test/test.html（此处未翻译）如果我不翻译，则不会显示该行。它仅在使用％参数进行翻译后才会出现。

此处黑线的屏幕截图：http://i58.tinypic.com/nnllht.jpg）

编辑：更改为

时

video {
   display: block
}

该行显示在顶部，display:inline位于视频的底部（不仅仅是在safari中）

的CSS：

.animation {
    position: relative;
    top:50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#preloader {
    position: fixed;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    -webkit-backface-visibility: hidden;
}

HTML：

<body>
    <!-- Main content here, which appears trough js, after animation ended -->
    <div id="preloader">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2 animation">
            <video id="introVideo" width="100%" poster="images/fff.png" preload autoplay="autoplay">
                <source src="video/PreLoader.mp4" type="video/mp4">
                <source src="video/PreLoader.oggtheora.ogv" type="video/ogg">
                <source src="video/PreLoader.webmhd.webm" type="video/webm">
             Your browser does not support HTML5 video.</video>
        </div>
    </div>
</body>

翻译后，视频上方会出现黑线

0 个答案: