Chrome HTML5视频-调整大小后模糊网页

Question

我在我的网站中使用BigVideo.js插件（ http://dfcb.github.io/BigVideo.js/ ）。 我还使用以下Javascript在用户调整浏览器大小时放大或缩小站点。

$(document).ready(function() {
     scaleSite();
});

$( window ).resize(function() {
    scaleSite();
});

// Scale Site to Fit Window
function scaleSite() {
    var windowWidth = $( window ).width();
    var defaultWidth = 1200;
    var scaleWidth = 1;
    var isMobile = false; 
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        // MOBILE ACTIONS   
    } else {
        // STANDARD ACTIONS
        if(windowWidth >= defaultWidth) {
            scaleWidth = windowWidth/defaultWidth;
            var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
        } else {
            scaleWidth = windowWidth/defaultWidth;
            var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
        }
        $("#mainDiv").css("-webkit-transform", "scale("+scaleWidth+")");
        $("#mainDiv").css("-moz-transform", "scale("+scaleWidth+")");
        $("#mainDiv").css("-o-transform", "scale("+scaleWidth+")");
        $("#mainDiv").css("msTransform", "scale("+scaleWidth+")");

        $("#fixedHeader").css("-webkit-transform", "scale("+scaleWidth+")");
        $("#fixedHeader").css("-moz-transform", "scale("+scaleWidth+")");
        $("#fixedHeader").css("-o-transform", "scale("+scaleWidth+")");
        $("#fixedHeader").css("msTransform", "scale("+scaleWidth+")");

        // RESET BODY HEIGHT
        var mainDivHeight = ($("#mainDiv").height()*scaleWidthRounded);
        $("body").css("height", mainDivHeight);
        $("html").css("height", mainDivHeight);
    }
}

奇怪的是，当我加载一个正在播放视频的页面，并尝试调整浏览器的大小时，缩放比例可以正常工作，但视频的所有内容都变得有些模糊。

使用Jssor Slider插件时，我遇到了同样的问题，它在调整浏览器窗口大小后也导致页面模糊。 我通过在Jssor Slider的选项中添加$ HWA：false解决了该问题，该选项禁用了插件使用硬件加速的功能。

我可以调整BigVideo.js或基础Video.js文件中的某些内容，以防止那里的硬件加速吗？ 似乎是同一原因。

更新

我只是注意到模糊问题仅在Chrome中发生。 Firefox和Internet Explorer都可以正常工作，但在Chrome中，除BigVideo本身以外的所有其他页面上的所有内容都会稍微模糊。

更新2

好的，所以我刚刚注意到，如果我检查div上包含HTML5 <video>标记的元素并将其从DOM中删除，我的文本将“重新捕捉”到焦点上。 我逐项检查了div，并检查了CSS样式，认为这会导致出现问题，但仍然没有运气。

为什么要在Chrome DEV工具中从DOM中删除元素，将页面的其余部分重新对准焦点并消除模糊？

下面的屏幕快照显示了在调整浏览器窗口大小之前页面上的文本示例，以及在调整大小之后的结果。 同样，如果我调整大小，页面会变得有点模糊，并且如果我使用Chrome DEV工具删除包含<video>的元素，模糊就会消失。

更新3

因此，我删除了BigVideo插件，并用通用的HTML5 <video>标签替换了该插件，该视频仍然可以播放，并且在调整浏览器大小时仍然存在模糊问题。 因此，chrome处理我的秤站点脚本以及处理HTML5视频的方式都与此有关。

JSFIDDLE

https://jsfiddle.net/h5vu7La7/3/

不知道这是否会有所帮助，但是如果您在jsFiddle上调整窗口大小，您会看到文本（在Chrome中）有点模糊。 如果从HTML中删除<video>并重新运行并调整其大小，则它不会模糊。

还请注意，如果您运行小提琴，然后检查视频中的元素并将其从DOM中删除，则文本将重新聚焦。

Answer 1

如果将变换比例CSS规则应用于具有子元素的HTML元素（我猜图片中可见的元素位于要缩放的div之一内），由于图层移至3D平面，它们将变得有些模糊。

打开检查器并应用transform: scale(1.01); 点击下面的蓝色按钮，您就会明白我的意思。

除了调整比例外，您还应该调整视频元素的宽度和高度。