Chrome messing up images inside a scaled element which has border radius
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:
// Badvar 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:
// Rightvar 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