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

好的，所以我注意到如果我检查包含HTML5 <video>标记的div上的元素并将其从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

If you are applying transform scale CSS rule to a HTML element that has child elements (I'm guessing those visible in the pictures are inside one of the divs you are scaling), they will get somewhat blurry due the layer moving to 3D plane.

Open inspector and apply transform: scale(1.01); to the blue button below here on SO and you'll realize what I mean.

Instead of scale, you should just resize the width and height of the video element.

Chrome HTML5视频 - 调整大小的Blurs网页

1 个答案: