前端常见兼容问题系列3:永远置于顶层的video

上一篇我们把消失的video找了出来。这一篇我们接着在video上面遮盖一个层,以方便放置一些内容。于是,我们这么做:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        .content{
            position: fixed;
            top: 0;
            z-index: 999;
            background-color: aqua;
            width: 100%;
            height: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
    <div class="content">遮盖层</div>
</body>
</html>

我们期待的效果如图1:

前端常见兼容问题系列3:永远置于顶层的video

图1

但是,在小米2S的UC浏览器(Anndroid版本:5.0.2LRX22G)下查看,得到的效果却如图2所示。找了个华为荣耀6 plus(Anndroid版本:4.4.2)的UC浏览器测试,也存在同样的问题。我大胆猜测,估计又很多的安卓手机上的UC浏览器中都会有此问题。

前端常见兼容问题系列3:永远置于顶层的video

图2

video怎么跑到遮盖曾的顶上来了?是它的z-index过大吗?通过在页面的</body>之前增加代码<script>alert(window.getComputedStyle(document.querySelector('video'),null).getPropertyValue('z-index'));</script>把video的z-index打印出来,发现是'auto'。所以,并不是video的z-index过大的问题。由此可见,这是video标签在UC浏览器下的一个bug。

网上搜索一番,发现有人讨论说这可能是UC把video解析成了native控件,看起来不无道理,但并无官方的确认信息。暂且就知道有这么个问题吧。下回再收到一个要在视频上盖点东西的需求,又必需兼容UC的,你就心里有数啦。

上一篇:前端常见兼容问题系列6: 一些安卓APP的WebView中不工作


下一篇:前端常见兼容问题系列5:¥符号在部分Android APP的WebView中不见了