Chrome messing up images inside a scaled element which has border radius

Question

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 widt

Answer 1

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