Chrome messed up images inside a scaled element with border radius

Question

USING CASE

I am trying to create a slide show application. Each slide has a fixed aspect ratio, but I want the content to be displayed with their normal width / height - so I'm trying to use CSS3 "transform: scale" on the contents of the slide using the width / height of the viewport I calculate the ideal scale / margins to fit slide into the viewport. On one specific slide, I show some “information map” for people and a list of each person's “successors”

RELEASE

Chrome shows very strange behavior on images. If you resize the window, the images will move around the place. If you force the image to redraw in some way, the image seems to fix itself (i.e., scrolls the page down and backs up)

Editing it is like an image inside a field with a border radius!

Question

Is this a bug in Chrome? Is there any work that will help solve this problem?

LIVE EXAMPLE

Live feed

In this live example, you can resize the results pane to zoom. At least in my version of chrome, the image becomes unstable.

MAIL EDITIONS

I reduced the code to the minimum necessary to reproduce the problem. I used only webkit provider prefixes.

I also updated the description of the problem, because after flashing the code, I realized that it should have something to do with the radius of the border of the element containing the image!

Original script

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

Answer 1

This is because you are splitting here

 var scale = width / iWidth; 

which gives you a number with a lot of decimal places;

Using this number with CSS3 Transform - Scale() forces the engine to perform some lengthy calculation, which Chrome apparently doesn't handle;

and then +1, you probably found a CSS CSS mechanism error.

---

For entries: Chrome seems to be having problems with TWO decimal numbers:

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

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

Feel free to open the @ Google bug report.

---

Decision:

To prevent this from happening, you can simply round the value to the decimal number ONE , for example:

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

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

This way your math will be less accurate, but probably not noticeable.

Hope that helps