6

用例

我正在尝试构建一个“幻灯片放映”类型的应用程序。每张幻灯片都有一个固定的纵横比，但我希望内容以其正常的宽度/高度呈现 - 所以我试图在幻灯片的内容上使用 CSS3“transform:scale”，使用视口宽度/高度我计算理想的比例/边距以使幻灯片适合视口。在一张特定的幻灯片上，我展示了一些人的“信息卡”和每个人的“继任者”列表

问题

Chrome 在图像上显示出一些非常奇怪的行为。如果您调整窗口大小，图像会到处移动。如果您强制图像以某种方式重新绘制，图像似乎会自行修复（即向下滚动页面并向上滚动）

编辑这似乎与边框半径框内的图像特别相关！

问题

这是 Chrome 中的错误吗？是否有任何解决方法可以解决此问题？

活生生的例子

现场小提琴

在这个实时示例中 - 您可以调整结果窗格的大小以缩放图像。至少在我的 chrome 版本中，图像变得混乱。

发布编辑

我将代码缩小到重现问题所需的最低限度。我只使用了 webkit 供应商前缀。

我还更新了问题描述，因为在整理代码之后，我意识到它一定与包含图像的元素的边框半径有关！

原始小提琴

HTML

<div class="container">
    <div class="inner">
        <div class="box">
            <img src="https://en.gravatar.com/userimage/22632911/5cc74047e143f8c15493eff910fc3a51.jpeg"/>
        </div>
    </div>
</div>

CSS

body {
    background-color: black;
}

.inner {
    background-color: white;
    width: 800px;
    height: 600px;
    -webkit-transform-origin: 0 0;
}

.box {
    overflow: hidden;
    -webkit-border-radius: 10px;
    width: 80px;
    height: 80px;
    margin: 10px;
}

JAVASCRIPT

(function ($) {
    var $inner = $('.inner');
    var $window = $(window);
    var iWidth = parseInt($inner.css('width'));
    var iHeight = parseInt($inner.css('height'));
    var iRatio = iWidth / iHeight;

    function adjustScale() {
        var vWidth = $window.width();
        var vHeight = $window.height();
        if (vWidth / vHeight > iRatio) {
            width = vHeight * iRatio;
        } else {
            width = vWidth;
        }
        var scale = width / iWidth;
        $inner[0].style.WebkitTransform = 'scale(' + scale + ')';
    }

    adjustScale();
    $window.resize(adjustScale);
})(jQuery);
4

1 回答 1

3

发生这种情况是因为您在这里执行除法

var scale = width / iWidth;

那是给你一个有很多小数的数字；

使用这个数字CSS3 Transform - Scale()会强制引擎执行一些冗长的计算，这显然不是由Chrome;

然后 +1，您可能发现了一个 CSS 引擎缺陷Chrome。

对于记录： 显然，Chrome 从两个十进制数字开始出现问题：

// Bad
var scale = (width / iWidth).toFixed(2);

（不）工作演示：http: //jsfiddle.net/VPZqA/1/

随意打开错误报告@ Google。

解决方案：

为了防止这种情况，您可以简单地将值四舍五入为一个十进制数，如下所示：

// Right
var scale = (width / iWidth).toFixed(1);

工作演示：http: //jsfiddle.net/VPZqA/

这样你的数学就会不那么精确，但在某种程度上可能并不明显。

希望有帮助

于 2013-03-08T13:46:02.643 回答