Chrome会在具有边框半径的缩放元素中混乱图片 [英] Chrome messing up images inside a scaled element which has border radius

问题描述

USE CASE

我正在建立一个幻灯片类型的应用程序。每个幻灯片有一个固定的宽高比，但我想要的内容以正常的宽度/高度呈现 - 所以我试图使用CSS3transform：scale对幻灯片的内容，使用视口宽度/高度I计算将幻灯片适配到视口中的理想尺度/边距。在一张幻灯片上，我为人们展示了一些信息卡，并列出了每个人的继承人。

ISSUE

Chrome在图片上显示了一些非常奇怪的行为。如果你调整窗口大小的图像移动的地方。如果你强迫图像重新绘图，无论如何图像似乎修复了自己（即滚动页面向下和备份）

编辑这似乎与一个图像内部

这是Chrome中的错误吗？> >

Live Fiddle

在此实例中 - 您可以将结果窗格调整为导致图像被缩放。

POST EDITS

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

我也更新了问题描述，因为在widdling代码后，我意识到它必须与元素的边界半径图片！

Original Fiddle

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）; 
  

解决方案

/ p>

  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 。

---

解决方案：

为避免这种情况，您只需将值四舍五入为 ONE 十进制数，例如：

  // Right 
 var scale =（width / iWidth）.toFixed（1）; 
  

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

希望有助于

USE CASE

I am trying to build a "slide show" type application. Each slide has a fixed aspect ratio, but I want the contents to be rendered with their normal width/height - so I am trying to use the CSS3 "transform:scale" on the contents of the slide, using the viewport width/height I calculate the ideal scale/margins to fit the slide into the viewport. On one particular slide I am showing some "info card" for people and a list of each person's "successors"

ISSUE

Chrome is showing some very weird behavior on the images. If you resize the window the images move all over the place. If you force the image to repaint somehow the image seems to fix itself (i.e. scroll page down and back up)

Edit this seems related specifically to an image inside a box with border radius!

QUESTION

Is this a bug in Chrome? Is there any work around that will fix this issue?

LIVE EXAMPLE

Live Fiddle

In this live example - you can resize the Result Pane to cause the image to be scaled. At least in my version of chrome the image goes haywire.

POST EDITS

I widdled the code down to the minimum required to reproduce issue. I only used webkit vendor prefixes.

I also updated the issue description because after widdling the code down I realized it must have something to do with the border radius of the element containing the image!

Original Fiddle

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);

解决方案

This is happening because you are performing a division here

var scale = width / iWidth;

that is giving you a number with a lot of decimals;

Using this number with CSS3 Transform - Scale() forces the engine to perform some long calculation, that appearently is not well-handled by Chrome;

then +1, you probably discovered an CSS engine flaw of Chrome.

---

For the records: appearently, Chrome starts having problems from TWO decimal numbers:

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

(Not) Working demo: http://jsfiddle.net/VPZqA/1/

Feel free to open a bug-report @ Google.

---

Solution:

To prevent that, you can simply round the value to ONE decimal number, like this:

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

Working demo: http://jsfiddle.net/VPZqA/

This way your math will be less precise, but in a way probably not noticeable.

Hope that helps

这篇关于Chrome会在具有边框半径的缩放元素中混乱图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！